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

Here is the link to codesandbox

请查看错误信息。是因为钩子吗？

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 }]);
  };

它在销毁时起作用的原因是因为创建一个常量会在那时创建一个信息克隆，并将其保留在其范围内。

为什么我需要使用对象解构来使用React Hooks正确更改受控输入的值？

1 个答案: