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

要在 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 更容易跟踪并仅重新渲染更改的内容。

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

在 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 属性并使用扩展语法 … 复制其余属性。

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