迹忆客 专注技术分享

要在 React 状态下替换数组中的对象：

1. 使用 map() 方法遍历数组。
2. 在每次迭代中，检查是否满足某个条件。
3. 替换满足条件的对象并按原样返回所有其他对象。

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 replace object
      if (obj.id === 2) {
        return {id: 1234, country: 'Germany'};
      }

      // 👇️ 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() 方法不会改变原始数组，它会返回一个新数组。

在每次迭代中，我们检查对象是否具有等于 2 的 id 属性。如果是，我们将其替换为新对象。

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

不要在 React 应用程序中直接改变状态是非常重要的。 当我们专门使用 setState 方法来更新组件的状态时，React 更容易跟踪并仅重新渲染更改的内容。

如果我单击按钮，状态数组中的第二个对象将被替换。

请注意，我们还可以仅更新状态数组中对象的某些属性。

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;

上面的代码片段与上一个非常相似。 但是，我们没有替换整个对象，而是覆盖了 country 属性并使用扩展语法 ... 复制其余属性。

当我们不需要替换整个对象并且只需要更新对象的某些属性时，这很有用。