Почему я не могу поделиться информацией между вводом формы (дочерний компонент) и React useState Hook (родительский компонент)?

Question

Я делаю многоэтапную форму с помощью React и ожидаю, что когда пользователь нажмет кнопку "Далее", он / она сможет перейти к следующей форме, сохранить информацию в родительском компоненте useState Hook и сохранить ее во входных данных, если пользователь решит перейти назад. У Switch 8 корпусов, но я оставил только 1 для простоты. Структура выглядит примерно так (вопросы после кода):

<MainForm /> |_ <UserInfo /> |_ Another 7 childs

MainForm.js

import React, { useState } from "react";

import UserInfo from "../components/Shared/UserInfo";
//import ... more childs ...
import {
  BackButton,
  NextButton,
  SendButton,
} from "../components/Shared/Buttons";

const BDMForm = (props) => {
  const [step, setStep] = useState(1);
  const [datos, setDatos] = useState({
    fullName: "",
    email: "",
    phoneNumber: "",
    linkedIn: "",
    city: "",
    experience: "",
  });

  const handleChange = (e) => {
    setDatos({ ...datos, [e.target.name]: e.target.value });
  };
  function renderComponent(step) {
    let currentStep = step;

    switch (currentStep) {
      case 1:
        return <UserInfo handleChange={handleChange} datos={datos.fullName} />;

      // 7 more cases
}
  return (
    <form>
      {renderComponent(step)}
      <div className="button-container">
        <BackButton step={step} setStep={setStep} />
        {step >= 7 ? null : <NextButton step={step} setStep={setStep} />}
        {step === 7 ? <SendButton /> : null}
      </div>
    </form>
  );
};

export default MainForm;

UserInfo.js

import React from "react";

  return (
        <div className="card-container">
          <label>
            Nombre y Apellido<span> *</span>
          </label>
          <input
            type="text"
            name="fullName"
            value={props.datos}
            onChange={props.handleChange}
          />
        </div>
      </div>
  );
};

export default UserInfo;

У меня 2 вопроса:

1) Когда я что-то пишу на входе fullName (UserInfo.js), я думаю, что React обновляет компонент со значением по умолчанию (""), поэтому я не могу ничего написать на нем. Ожидаемое поведение: пользователь может писать, и вводимые данные следует сохранять в datos.fullName родительского компонента. Когда пользователь нажимает "Далее" или "Назад", записанная информация все еще будет там.

2) Мой подход в порядке? Должен ли я сохранять все дочерние данные в родительском компоненте, а затем обращаться к ним из другого дочернего элемента позже (например, Confirm.js или где-то еще, где пользователь может прочитать информацию перед ее отправкой). Я пытался изучить Context API, но до сих пор не понимаю, как его реализовать

Answer 1

Измените свой handleChange работают так:

  const handleChange = (e) => {
    const fieldName = e.target.name;
    const fieldValue = e.target.value;
    setDatos(prevDatos => ({ ...prevDatos, [fieldName]: fieldValue }));
  };

Когда новое состояние зависит от предыдущего состояния, вы должны использовать функциональный способ обновления состояния.

Что касается вашего второго вопроса, да, ваш подход в порядке.

И, наконец, я хотел бы сохранить некоторую последовательность при определении функций. Я имею в видуhandleChange а также renderComponent функции.