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

Question

Я делаю многоэтапную форму с React, и я ожидаю, что когда пользователь нажимает кнопку «Далее», он может go перейти к следующей форме, сохранить информацию в родительском компоненте useState Hook и сохранить ее на входе если пользователь решит go назад. У 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) Мой подход в порядке? Должен ли я сохранять все дочерние данные в родительском компоненте, а затем обращаться к ним от другого потомка (например, Подтвердить. 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.