如何使用React Hooks在对象数组中的变化中更新状态（附代码示例）

你可能知道如何更新数组中的onChange，但你有没有想过如何更新对象数组中的状态并反映新的变化？

在这篇文章中，我们将看看如何使用React Hooks来更新数组对象中的onChange状态。

为了在变化发生时更新对象数组中的状态（onChange）。我们将创建一个数组并将其存储在useState钩子里面。然后，我们将制作一个函数 更新状态来处理我们的onChange属性。

让我们来看看它的操作。

用useState()创建一个数组

在你的React应用程序中创建一个 数据数组，其中有几个对象，如下图代码所示。将该 datas数组在useState钩中：

// App.js
const datas = [
    {
      id: 1,
      name: 'Nick',
      age: 21
    },
    {
      id: 2,
      name: 'Lara',
      age: 30
    }
  ];

  const [data, setData] = useState(datas);

发生变化时更新状态的函数。

该 ***updateState()***包含一个检查索引的回调函数。

然后该函数映射到数据中并返回一个包含所有属性的新对象数组。

它将datas数组的内容散布在一个新的对象中，然后替换选定索引中的对象，最后从这个结果中创建一个数组。

然后，我们更新我们的状态 设置数据到返回的数组中：

// App.js
const updateState = (index) => (e) => {
    const newArray = data.map((item, i) => {
      if (index === i) {
        return { ...item, [e.target.name]: e.target.value };
      } else {
        return item;
      }
    });
    setData(newArray);
  };

创建一个输入字段，就像下面的代码一样，每当用户在输入字段中进行修改时，就会借助于我们的 更新状态函数。

将onChange道具设置为 更新状态函数，并传递索引作为参数：

// App.js
import { useState } from 'react';
import './App.css';

function App() {
  const datas = [
    {
      id: 1,
      name: 'Nick',
      age: 21
    },
    {
      id: 2,
      name: 'Lara',
      age: 30
    }
  ];

  const [data, setData] = useState(datas);

  const updateState = (index) => (e) => {
    const newArray = data.map((item, i) => {
      if (index === i) {
        return { ...item, [e.target.name]: e.target.value };
      } else {
        return item;
      }
    });
    setData(newArray);
  };

  return (
    <div className="App">
      <p>Hello, world!</p>
      {data.map((datum, index) => {
        <li key={datum.name}>
          <input
            type="text"
            name="name"
            value={datum.name}
            onChange={updateState(index)}
          />
        </li>;
        })}
    </div>
  );
}

export default App;

总结

希望你现在已经理解了如何更新对象数组中的状态。你一定知道如何更新数组中的状态，但是在这篇文章中，我们更新了一个数组对象的状态。

如果你有任何问题或建议，请随时评论。如果你想为一个特定的主题索取任何文章，请通过关于页面联系我们。我们很愿意听到你的意见。