Реагировать на состояние обновления из формы

Question

Я пытаюсь получить значения из формы и сохранить их в состоянии. Каждый раз, когда я следую руководству, я получаю следующую ошибку (не говоря уже о том, что все руководства находятся в стиле реакции класса):

«Ничего не было возвращено из рендеринга. Обычно это означает, что отсутствует оператор возврата. . Или, чтобы ничего не отображать, верните null. "

Компонент визуализируется, и я могу даже передать фиктивное значение step.generalInfo.name, и оно появится в компоненте. Однако, как только я нажимаю клавишу на входе, возникает ошибка стрелы. Я думаю, что ошибка находится в одном из двух мест - либо в моем handleChange (), либо в том, как я пытаюсь обновить состояние, когда я пытаюсь получить значение в объекте внутри другого объекта. Я, вероятно, неправильно занимаюсь разрушением или опорным бурением. Пожалуйста помоги! Спасибо!

App () отображает форму ниже:

function Form() {
  const [step, setStep] = useState({
    stage: 1,
    generalInfo: {
      name: "",
      batchSize: "",
      batchType: "",
      batchNumber: "",
      ibu: "",
      srm: "",
      abv: "",
      origionalGravity: "",
      finalGravity: "",
      brewingDate: "",
      dateSecondary: "",
      dateBottling: "",
    },
    ingredients: ["", "", ""],
    brewingNotes: "",
    hopsNotes: "",
    yeastNotes: "",
    fermentationNotes: "",

... Дополнительные функции состояния и следующей / предыдущей страницы ...

  const handleChange = (e) => {
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep({ [e.target.name]: e.target.value });
    console.log(step);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
  };
  switch (step.stage) {
    case 1:
      return (
        <StepOne
          step={step}
          next={next}
          prev={prev}
          handleChange={handleChange}
          setStep={setStep}
        />
      );
  }
}

export default Form;

Компонент StepOne ниже:

function StepOne({ step, next, prev, handleChange, setStep }) {
  const {
    name,
    batchSize,
    batchType,
    batchNumber,
    ibu,
    srm,
    abv,
    origionalGravity,
    finalGravity,
    brewingDate,
    dateSecondary,
    dateBottling,
  } = step.generalInfo;

  return (
    <div className="form-container">
      <h1>General Info</h1>
      <form>
        <div className="label-group">
          <label>Name:</label>
          <input type="text" name="name" onChange={handleChange} />
        </div>
        <button onClick={next}>Next</button>
      </form>
    </div>
  );
}

export default StepOne;

Answer 1

Ваша функция handleChange неверна, она удаляет все поля в состоянии step, кроме текущего измененного поля. Это может привести к тому, что другой компонент будет взламывать sh, если он использует данные из состояния step

Это должно быть

const handleChange = (e) => {
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep({ ...step, [e.target.name]: e.target.value }); <= HERE
    console.log(step);
};

Answer 2

Ручка фиксации Изменение было ключом!

  const handleChange = (e) => {
    e.persist();
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep((state) => ({
      ...state,
      generalInfo: { ...state.generalInfo, [e.target.name]: e.target.value },
    }));
    console.log(step);
  };

Answer 3

Я считаю, что его setStep в вашем методе handleChange

setStep({ [e.target.name]: e.target.value });

useState не объединяется так же, как this.setState, поэтому stage перезаписывается, и ваш оператор switch не возвращает рендеринг.

Вместо этого вам нужно передать функцию для итерации состояния

setStep((state) => ({...state, generalInfo: {...state.generalInfo, [e.target.name]: e.target.value}}))

Но, учитывая объем вложенности, местоположение e.target.name будет трудно найти; вы выиграете от использования useReducer вместо useState.