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

作者

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

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

在每次迭代中，我们检查对象是否具有id等于 的属性2。如果是这样，我们用一个新对象替换它。

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

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

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

替换数组中的对象反应

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

应用程序.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;

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

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

–

发表评论