Javascript 映射是编辑我的useState的正确方法吗？

我正在尝试使用文本框和useState制作一个简单的表格/网格状电子表格。我正在使用.map加载它们，然后我只想编辑每一个（这反过来会编辑状态）我处于早期阶段，不确定我是否以错误的方式进行操作。。这是我到目前为止所拥有的

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;

import React，{useState}来自“React”；
导入“/style.css”；
常量应用=（）=>{
const[data，setData]=useState([
{姓：“埃隆”，姓“麝香”}，
{
名字：“杰夫”，
姓氏：“贝佐斯”，
其他详细信息：[{worth:“Lots”}，{company:“Amazon”}]，
},
]);
常数handleChange=（e）=>{
e、 预防默认值（）
setData（（prevState）=>({
…国家，
[e.target.name]：e.target.value，
}));
};
返回(
{data.map（（x，i）=>{
返回[
,
,


,，
];
})}
);
};
导出默认应用程序；

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

data.map（x，i）=>{
返回(