javascript - .map 是编辑我的 useState 的正确方法吗？

Question

我正在尝试使用文本框和 useState 制作一个简单的表格/网格，如电子表格。我正在使用 .map 加载它们，然后我只想编辑 eachc 一个（依次编辑状态）到目前为止

import React, { useState } from "react";

import "./style.css";
const App = () => {
  const [data, setData] = useState([
    { firstName: "Elon", lastName: "Musk" },
    {
      firstName: "Jeff",
      lastName: "Bezos",
      additionDetails: [{ worth: "Lots" }, { company: "Amazon" }],
    },
  ]);

  const handleChange = (e) => {
    e.preventDefault()
    setData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  return (
    <>
      {data.map((x, i) => {
        return [
          <input
            type="text"
            name="firstName"
            value={x.firstName}
            onChange={handleChange}
          />,

          <input
            type="text"
            name="lastName"
            value={x.lastName}
            onChange={handleChange}
          />,
          <br></br>,
        ];
      })}
    </>
  );
};

export default App;

标签： javascriptreactjsstate

Answer 1

删除 handleChange 函数并用匿名函数替换 onChange 事件，该函数将复制新变量中的数据值，编辑该新变量，然后使用 'setData()' 将数据值更改为新变量的值，如下所示：

data.map(x, i) => {

return (
<input type="text" name="firstName" value={x.firstName} onChange={function(e) {
const newData = data;
newData[i][e.target.name] = e.target.value;
setData(newData);
}