为什么我需要使用对象去析来使用 React Hooks 正确更改受控输入的值?

Question

当我使用对象解构时，一切正常，但如果在两次击键后没有它的情况下编写它，我得到的错误很少。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
const [people, setPerson] = useState([{ name: "", lastName: "" }]);
const handleChange = (event, index) => {
const { name, value } = event.target;
setPerson(prevState => [{ ...prevState[index], [event.target.name]: event.target.value }]);
};
useEffect(() => console.log(people));
return (
<div>
{people.map((person, index) => (
<form key={index}>
<input
placeholder="name"
value={person.name}
name="name"
onChange={event => handleChange(event, index)}
/>
<input
placeholder="lastName"
value={person.lastName}
name="lastName"
onChange={event => handleChange(event, index)}
/>
</form>
))}
</div>
);
}

这是代码沙箱的链接

请参阅错误。是因为钩子吗？

Answer 1

有问题的函数是这样的：

const handleChange = (event, index) => {
const { name, value } = event.target;
setPerson(prevState => [{ ...prevState[index], [event.target.name]: event.target.value }]);
};

键入时失败的原因是它尝试引用已发布的事件。若要防止此错误，可以保留事件，直到函数完成。这也适用于在函数之间传递事件的情况。

const handleChange = (event, index) => {
event.persist()
const { name, value } = event.target;
setPerson(prevState => [{ ...prevState[index], [event.target.name]: event.target.value }]);
};

它在析构时起作用的原因是，创建常量会在当时创建信息的克隆，该克隆将保留在其范围内。