从表单响应更新状态答案

【问题标题】：React update state from a form从表单响应更新状态
【发布时间】：2020-07-11 02:08:24
【问题描述】：

我正在尝试从表单中获取值并将其存储在状态中。每次我遵循指南时，都会收到以下错误（更不用说指南都是类风格的反应）：

“渲染没有返回任何内容。这通常意味着返回声明丢失。或者，不渲染任何内容，返回 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;

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您的函数handleChange 不正确，它删除了状态step 中的所有字段，但当前更改的字段除外。如果另一个组件使用来自状态 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);
};

【讨论】：

感谢您的评论！你和上面的人通过将旧状态值传播到新状态来解决我的问题。

【解决方案2】：

我相信它在你的 handleChange 方法中的 setStep

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

useState 不会以与 this.setState 相同的方式合并，因此阶段会被覆盖，并且您的 switch 语句不会返回渲染。

您需要传递一个函数来迭代状态

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

但是考虑到嵌套的数量，e.target.name 的位置很难找到；你会从使用 useReducer 而不是 useState 中受益很多。

【讨论】：

谢谢！加上添加 e.persist()l;进入handleChange修复它！我现在可以更新该嵌套状态。有道理，您如何解释它正在覆盖状态，然后它没有要渲染的东西，也就是我遇到的那个错误。

【解决方案3】：

修复 handleChange 是关键！

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

【讨论】：