如何根據我的初始 state 更新 state

Question

我在這里要做的是構建一個動態組件，它將負責獲取一組對象，並且表單將基於我的 formState 構建。 所以我制作了我的初始 State 並使用 .map 在 state 上進行循環並將鍵映射到使 label、值和輸入基於 state 出現。但我的問題是在 onChange 上。 如何更新每個 object 中的值鍵並為其設置新的 state。 任何建議，請。

import { useState } from "react";
import InputText from "./components";
import useForm from "./hooks/useForm";

function App() {
  interface formStateT {
    id: number;
    label: string;
    value: any;
    error: string;
  }

  const formState = [
    {
      id: 0,
      label: "firstName",
      value: "",
      error: "",
    },
    {
      id: 1,
      label: "lastName",
      value: "",
      error: "",
    },
  ];

  const { form, validate, setForm, checkValidHandler } = useForm(formState);
  const [error, setError] = useState("");

  const submitFormHandler = (e: { preventDefault: () => void }) => {
    e.preventDefault();

    checkValidHandler();

    // write form logic
    // setError() will be used to take the error message

    console.log(form);
  };

  return (
    <form onSubmit={(e) => submitFormHandler(e)}>
      {form.map((f: formStateT) => (
        <InputText
          key={f.id}
          label={f.label}
          value={f.value}
          onChange={(e) => {
            // Im trying here to update the value key of every label key.
            // setForm({ ...form, [f.label.valueOf()]: f.value })
          }}
          valid={f.value === "" ? validate.notValid : validate.valid}
          errorMsg={error === "" ? f.error : error}
          classes={"class"}
        />
      ))}
      <button>Submit</button>
    </form>
  );
}

export default App;

Answer 1

根據您的評論， f.value = e.target.value; 是一個 state 突變，應該避免， setForm([...form]); 正在掩蓋突變。

在App中創建一個onChangeHandler function，它接受onChange事件 object 和您要更新的索引。 從onChange事件中解壓value並更新 state。處理程序應使用功能性 state 更新來更新之前的 state，並創建form數組的淺表副本，使用索引淺表復制並更新正確的數組元素。

例子：

// curried function to close over index in scope, and
// return handler function to consume event object
const onChangeHandler = index => e => {
  const { value } = e.target;
  setForm(form => form.map((el, i) => 
    i === index
      ? { ...el, value }
      : el
  ));
};

...

<form onSubmit={submitFormHandler}>
  {form.map((f: formStateT, index: number) => (
    <InputText
      key={f.id}
      label={f.label}
      value={f.value}
      onChange={onChangeHandler(index)} // <-- invoke and pass mapped index
      valid={f.value === "" ? validate.notValid : validate.valid}
      errorMsg={error === "" ? f.error : error}
      classes={"class"}
    />
  ))}
  <button>Submit</button>
</form>