在 React 状态下更新数组中的对象

作者

在 React 状态下更新数组中的对象

Update an Object in an Array in React State

在 React 状态下更新数组中的对象：

  1. 使用该map()方法遍历数组。
  2. 在每次迭代中，检查是否满足特定条件。
  3. 更新满足条件的对象并按原样返回所有其他对象。
应用程序.js
import {useState} from 'react';

const App = () => {
  const initialState = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Belgium'},
    {id: 3, country: 'Canada'},
  ];

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

  const updateState = () => {
    const newState = data.map(obj => {
      // 👇️ if id equals 2, update country property
      if (obj.id === 2) {
        return {...obj, country: 'Denmark'};
      }

      // 👇️ otherwise return object as is
      return obj;
    });

    setData(newState);
  };

  return (
    <div>
      <button onClick={updateState}>Update state</button>

      {data.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们传递给
Array.map
方法的函数被数组中的每个元素（对象）调用。

无论我们从传递给map()方法的函数返回什么，都会插入到新数组中。

该map()方法不会改变原始数组，它会返回一个新数组。

在每次迭代中，我们检查对象是否具有id等于 的属性2。

如果是，我们使用
扩展运算符 (…)
解压缩对象的其他键值对，然后覆盖该
country属性。

如果不满足条件，我们将按原样返回对象。

在 React 应用程序中不要直接改变状态是非常重要的。当我们专门使用该setState方法来更新组件的状态时，React 可以更轻松地跟踪更改并仅重新呈现必要的内容。

当我单击按钮时，状态数组中的第二个对象得到更新。

更新数组中的对象反应

您还可以将一个函数传递给setState我们从
useState挂钩中获取的方法。

该函数以当前状态调用，可用于更新状态数组中的特定对象。

应用程序.js
import {useState} from 'react';

const App = () => {
  const initialState = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Belgium'},
    {id: 3, country: 'Canada'},
  ];

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

  const updateState = () => {
    // 👇️ passing function to setData method
    setData(prevState => {
      const newState = prevState.map(obj => {
        // 👇️ if id equals 2, update country property
        if (obj.id === 2) {
          return {...obj, country: 'Denmark'};
        }

        // 👇️ otherwise return object as is
        return obj;
      });

      return newState;
    });
  };

  return (
    <div>
      <button onClick={updateState}>Update state</button>

      {data.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
};

export default App;

代码示例实现了相同的结果。

但是，这次我们直接将函数传递给setData方法。该函数以当前状态调用，我们可以使用它来计算下一个状态。

无论我们从回调函数返回什么，都会被设置为新状态。

–

发表评论