Pourquoi mon composant enfant ne met-il pas à jour les données lorsqu'il change d'état dans React ?

Question

J'ai une liste d'utilisateurs et je veux afficher dans un autre composant sur la même page les données de l'utilisateur dans des champs de saisie pour chaque utilisateur sur lequel je clique.

Lorsqu'aucun utilisateur n'est sélectionné, je souhaite que le composant affiche simplement du texte et un bouton permettant d'ajouter un utilisateur. Lorsque le bouton est cliqué, le composant affiche le formulaire avec des champs de saisie vides afin que nous puissions ajouter un nouvel utilisateur.

J'ai essayé ce qui suit, mais les données ne s'affichent que pour le premier sur lequel je clique. Elles ne sont pas mises à jour.

La page principale :

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>
    </>
  );
};

Le composant du formulaire du personnel :

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. Tout d'abord, il convient d'éviter l'appel à la fonction renderComponent(). la première erreur mentionnée dans cette vidéo . Cela résoudra probablement votre problème, mais même si ce n'est pas le cas, la vidéo explique pourquoi il ne faut pas l'utiliser.
2. Une autre chose qui a attiré mon attention (peut-être sans rapport avec votre question mais bon à savoir) est la fonction onChange. Lorsque deux éléments d'état changent ensemble, c'est une source potentielle de problèmes. article sur l'utilisation du crochet useReducer .
3. Faites également attention aux noms des composants React, ils doivent être en majuscules, cette question contient des réponses appropriées qui l'expliquent . (Pour ne résoudre que votre problème, tenez-vous en au numéro 1 de cette liste, il y a quelques améliorations que je ferais ici pour la qualité et la beauté du code, envoyez-moi un message pour plus de détails).