× 类型错误：更改输入字段中的数据时无法设置未定义的属性'name'

Question

我正在尝试创建一个React应用程序。它有一个按钮"添加"，一旦你点击它，它添加了几个输入字段。每一行输入都有一个按钮"x";从屏幕上删除一行。当我将数据更改为输入时，我想要修复的问题发生在删除所有行并添加新行之后。它抛出一个错误:TypeError: Cannot set property 'name' of undefined"请提供任何建议来解决这个问题。谢谢。

handleChange
src/App.js:10
7 | let index = event.target.id;
8 | if (event.target.name === "name") {
9 |   let newArr = [...datas];
> 10 |   newArr[index].name = event.target.value;
| ^  11 |   setDatas(newArr);
12 | }
13 | if (event.target.name === "gender") {
View compiled
TypeError: Cannot set property 'name' of undefined

---

代码如下:

import { useState } from "react";
const App = () => {
const [datas, setDatas] = useState([]);
const [counter, setCounter] = useState(0);
const handleChange = (event) => {
let index = event.target.id;
if (event.target.name === "name") {
let newArr = [...datas];
newArr[index].name = event.target.value;
setDatas(newArr);
}
if (event.target.name === "gender") {
let newArr = [...datas];
newArr[index].gender = event.target.value;
setDatas(newArr);
}
};
const removeItem = (id) => {
let newItems = datas.filter((product) => product.id !== id);
setDatas(newItems);
};
console.log(datas);
return (
<>
{datas.map((data, index) => {
return (
<li key={index}>
<input
name="name"
id={data.id}
value={data.name}
onChange={handleChange}
/>
<input
name="gender"
id={data.id}
value={data.gender}
onChange={handleChange}
/>
<button onClick={() => removeItem(data.id)}>X</button>
</li>
);
})}
<button
onClick={() => {
setCounter((prevState) => prevState + 1);
setDatas([...datas, { id: counter, name: "", gender: "" }]);
}}
>
Add
</button>
</>
);
};
export default App;

Answer 1

您需要元素的ID作为您要迭代的索引，以便分配给newArr[index]-目前，ID是data.id，而不是索引。

你也在改变当前的状态——创建一个副本而不是改变。

{datas.map((data, index) => {
return (
<li key={index}>
<input
name="name"
id={index}
value={data.name}
onChange={handleChange}
/>

和避免突变:

const handleChange = (event) => {
const index = event.target.id;
if (event.target.name === "name") {
let newArr = [...datas];
newArr[index] = ({ ...newArr[index], name: event.target.value });
setDatas(newArr);
}

和性别使用相同的模式。

另一个避免使用动态id(这是一种代码气味)的选择是首先将索引curry到处理程序中。

const handleChange = index => event => {

，然后更改

onChange={handleChange}

onChange={handleChange(index)}