Блог

я не могу отобразить ответ api на форму, я использую ту же форму для добавления и для редактирования. я хочу , чтобы при нажатии на кнопку «Добавить» отображалось начальное пустое значение , но когда я нажимаю кнопку «Изменить», оно должно содержать конкретные пользовательские данные, но я не могу этого достичь.

Я пытался

 import React, { useState, useContext, useEffect } from "react";
import { useParams, useLocation } from "react-router-dom";
import { globalC } from "./context";

export default function DashboardForm() {
  const { detail, apiCalling } = useContext(globalC);
  useEffect(() => {
    apiCalling(id);
  }, []);
  const { pathname } = useLocation();
  const action = pathname.split("/")[1];

  const [name, setName] = useState(action === "add" ? "" : detail.name);
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");

  const { id } = useParams();

  return (
    <div style={{ height: "100vh" }}>
      <form>
        <input
          name="name"
          type="text"
          placeholder="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <br />
        <input
          name="username"
          type="text"
          placeholder="username"
          onChange={(e) => setUsername(e.target.value)}
        />
        <br />
        <input
          name="email"
          type="text"
          placeholder="email"
          onChange={(e) => setEmail(e.target.value)}
        />
      </form>
    </div>
  );
}

 

я использую контекстный api на основе классов , пользовательский api get вызывается в контексте,

Ссылка на Codesandbox : ссылка

войдите в систему и перейдите на панель мониторинга, чтобы попробовать пример

Имейте в виду, что ваш useState name запрос будет сначала вызван, когда вызов API еще не удался, что даст вам пустое имя. Затем , как только вы введете правильное имя detail , состояние уже будет создано.

Одним из решений было бы что-то вроде:

 if (!name amp;amp; detail.name) {
    setImmediate(() => setName(detail.name));
}
 

Поэтому, как только вызов API дал вам имя, и пока поле ввода имени все еще пусто, обновите его полученным именем.

Другое решение состоит в том, чтобы показывать форму только после успешного выполнения запроса API, а тем временем показывать экран загрузки.