為什么在 React 中更改 state 時我的子組件不更新數據？

Question

我有一個用戶列表，我想在同一頁面的另一個組件中顯示我單擊的每個用戶的輸入字段中的用戶數據。

當沒有選擇用戶時，我希望組件只呈現一些文本和一個按鈕來添加用戶。 單擊按鈕時，組件會呈現帶有空輸入字段的表單，以便我們可以添加新用戶。

我嘗試了以下操作，但它只是顯示我點擊的第一個數據。 它沒有更新。

主頁：

const index = (props) => {
  const [selectedUser, setSelectedUser] = useState(null);
  const [state, setState] = useState("Index");

  const onChange = (item) => {
    setState("Edit");
    setSelectedUser(item);
  };

  const onClick = (e, item) => {
    if (e.type === "click" && e.clientX !== 0 && e.clientY !== 0) {
      onChange(item);
    } else {
      console.log('prevented "onClick" on keypress');
    }
  };

  const renderComponent = () => {
    switch (state) {
      case "Index":
        return (
          <>
            <div className="btn" onClick={(e) => setState("Edit")}>
              + New Staff
            </div>
            <img src="/storage/illustrations/collaboration.svg" />
          </>
        );
      case "Edit":
        return (
          <div>
            <StaffForm profile={selectedUser} />
          </div>
        );
    }
  };

  return (
    <>
      <div>
        <div>
          <h1>Staff</h1>
        </div>

        <div>
          <div>
            {profiles.map((item, index) => {
              return (
                <div key={index} onClick={(e) => onClick(e, item)}>
                  <input
                    type={"radio"}
                    name={"staff"}
                    checked={state === item}
                    onChange={(e) => onChange(item)}
                  />

                  <span>{item.user.name}</span>
                </div>
              );
            })}
          </div>
          <div>{renderComponent()}</div>
        </div>
      </div>
    </>
  );
};

員工表單組件：

const StaffForm = ({ profile }) => {
  const { data, setData, post, processing, errors, reset } = useForm({
    email: profile ? profile.user.email : "",
    name: profile ? profile.user.name : "",
    phone_number: profile ? profile.user.phone_number : "",
    avatar: profile ? profile.user.avatar : "",
  });
  const [file, setFile] = useState(data.avatar);
  const handleImageUpload = (e) => {
    setFile(URL.createObjectURL(e.target.files[0]));
    setData("avatar", e.target.files[0]);
  };
  const onHandleChange = (event) => {
    setData(
      event.target.name,
      event.target.type === "checkbox"
        ? event.target.checked
        : event.target.value
    );
  };

  return (
    <div>
      <ImageUpload
        name={data.name}
        file={file}
        handleImageUpload={handleImageUpload}
      />
      <TextInput
        type="text"
        name="name"
        value={data.name}
        autoComplete="name"
        isFocused={true}
        onChange={onHandleChange}
        placeholder={t("Name")}
        required
      />
      <TextInput
        type="text"
        name="phone_number"
        value={data.phone_number}
        autoComplete="phone_number"
        placeholder={t("Phone Number")}
        onChange={onHandleChange}
        required
      />
      <TextInput
        type="email"
        name="email"
        value={data.email}
        autoComplete="email"
        onChange={onHandleChange}
        placeholder={t("Email")}
        required
      />
    </div>
  );
};

Answer 1

1. 首先，您應該避免的是 renderComponent() 調用。在此處查看本視頻中提到的第一個錯誤。 這很可能會解決您的問題，但即使不能，視頻也解釋了為什么不應使用它。
2. onChange function 引起了我的注意（可能與您的問題無關，但很高興知道）。當兩個 state 一起更改時，這是潛在的問題來源，請查看這篇關於何時使用 useReducer 鈎子的文章。
3. 命名 React Components 時也要小心，它們需要大寫， 這個問題包含解釋它的適當答案。 （為了只解決您的問題，請堅持使用此列表中的第 1 項，我會在此處總體上對代碼質量和美觀進行一些改進，請向我發送消息以獲取更多詳細信息）