在 React 中将元素推入状态数组

作者

在 React 中将元素推送到状态数组中

Push an element into a state Array in React

在 React 中使用传播语法将元素推送到状态数组中，例如
setNames(current => [...current, 'Carl']). 扩展语法 (…) 会将状态数组的现有元素解压缩到一个新数组中，我们可以在其中添加其他元素。

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

export default function App() {
  const [names, setNames] = useState(['Alice', 'Bob']);

  const handleClick = () => {
    // 👇️ push to end of state array
    setNames(current => [...current, 'Carl']);

    // 👇️ spread an array into the state array
    // setNames(current => [...current, ...['Carl', 'Delilah']]);

    // 👇️ push to beginning of state array
    // setNames(current => ['Zoey', ...current]);
  };

  return (
    <div>
      <div>
        <button onClick={handleClick}>Push to state array</button>
      </div>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
}

推送到状态数组

我们使用useState
钩子来管理状态数组。

我们将一个函数传递给setState，因为该函数保证以当前（最新）状态调用。

应用程序.js
setNames(current => [...current, 'Carl']);

当使用前一个状态计算下一个状态时，将一个函数传递给
setState.

否则，如果我们有权访问的状态数组不代表最新值，我们可能会遇到一些奇怪的竞争条件。

我们使用
扩展语法 (…)
将现有数组的元素解压缩到一个新数组中。

应用程序.js
const arr = ['Alice', 'Bob'];

const arr2 = [...arr, 'Carl'];

console.log(arr2); // 👉️ ['Alice', 'Bob', 'Carl']

该示例创建原始数组的浅表副本。

在 React 中工作时，不允许改变原始状态数组，因此我们不能push()直接使用该方法。

这种方法也可用于将对象推入状态数组。

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

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ];
  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    // 👇️ push object to end of state array
    setEmployees(current => [...current, {id: 3, name: 'Carl'}]);

    // 👇️ spread an array of objects into the state array
    // setEmployees(current => [
    //   ...current,
    //   ...[
    //     {id: 3, name: 'Carl'},
    //     {id: 4, name: 'Delilah'},
    //   ],
    // ]);

    // 👇️ push object to beginning of state array
    // setEmployees(current => [{id: 3, name: 'Zoey'}, ...current]);
  };

  return (
    <div>
      <div>
        <button onClick={handleClick}>Push to state array</button>
      </div>

      {employees.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element.name}</h2>
          </div>
        );
      })}
    </div>
  );
}

可以使用相同的方法将对象推入状态数组。我们只需将状态数组的元素解包到一个新数组中并添加对象。

–

发表评论