从表单响应更新状态

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 是关键！

  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 2

您的功能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);

};

Answer 3

我相信它在您的 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 中受益匪浅。