從表單反應更新 state

Question

我正在嘗試從表單中獲取值並將其存儲在 state 中。 每次我遵循指南時，都會收到以下錯誤（更不用說指南都是 class 風格的反應）：

“渲染沒有返回任何內容。這通常意味着缺少返回語句。或者，不渲染任何內容，返回 null。”

組件呈現，我什至可以將一個虛擬值傳遞給 step.generalInfo.name，它會顯示在組件上。 但是，只要我按一個鍵進入輸入，繁榮錯誤。 我認為錯誤出現在兩個地方之一 - 我的 handleChange() 或我嘗試更新 state 的方式，因為我試圖在另一個 object 中獲取一個值。 我可能沒有正確解構或支撐鑽孔。 請幫忙！ 謝謝！

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: "",

...更多 state 和下一頁/上一頁功能...

  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 方法中的 setStep

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

useState 不會以與 this.setState 相同的方式合並，因此階段被覆蓋並且您的 switch 語句不會返回渲染。

相反，您需要傳遞 function 來迭代 state

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

但是考慮到嵌套的數量，e.target.name 的位置很難找到； 你會從使用 useReducer 而不是 useState 中受益匪淺。

Answer 2

您的 function handleChange不正確，它刪除了 state step中的所有字段，但當前更改的字段除外。 如果使用 state 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 是關鍵！

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