迹忆客 专注技术分享

使用扩展语法 ... 在 React 中合并数组，例如 const arr3 = [...arr1, ...arr2]。 扩展语法用于将两个或多个数组的值解包到一个新数组中。 在设置状态时，可以使用相同的方法来合并两个或多个数组。

import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 200},
  ];

  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    const arr = [
      {id: 3, name: 'Carl', salary: 300},
      {id: 4, name: 'Demi', salary: 400},
    ];

    // 👇️ merge arrays 👇️
    setEmployees([...employees, ...arr]);
  };

  return (
    <div>
      <button onClick={handleClick}>Merge arrays</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>Name: {employee.name}</h2>
            <h2>Name: {employee.salary}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们使用扩展语法来合并两个数组。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr1, ...arr2];
console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

如果要将当前状态数组与另一个数组合并，可以将一个函数传递给我们从 useState 钩子中获得的 setState() 方法。

import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 200},
  ];

  const [employees, setEmployees] = useState(initialState);

  const handleClick = () => {
    const arr = [
      {id: 3, name: 'Carl', salary: 300},
      {id: 4, name: 'Demi', salary: 400},
    ];

    // 👇️ merge arrays (based on previous state array)
    setEmployees(prevState => [...prevState, ...arr]);
  };

  return (
    <div>
      <button onClick={handleClick}>Merge arrays</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>Name: {employee.name}</h2>
            <h2>Name: {employee.salary}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr1, ...arr2];
console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

我们向 setEmployees 方法传递了一个函数：setEmployees(prevState => [...prevState, ...arr]);。

这在将当前状态数组与另一个合并时更好，因为我们传递给 setEmployees 的函数可以保证以当前（最新）状态调用。

使用扩展语法时，解包数组的顺序很重要。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr2, ...arr1];

// 👇️ ['c', 'd', 'a', 'b']
console.log(arr3);

可以根据需要对尽可能多的数组重复此过程。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

const arr4 = [...arr1, ...arr2, ...arr3];

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

在 React 中设置状态时，我们可以使用相同的方法。 当我们使用扩展语法 ... 时，我们创建了原始数组的浅表副本。

我们可能还会看到 Array.concat 方法用于在 React 中合并数组。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

const arr4 = arr1.concat(arr2, arr3);

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

concat 方法还合并两个或多个数组。 该方法将一个或多个数组作为参数，并将它们合并到调用它的数组中。

然而，扩展语法 ... 在 React.js 应用程序中使用得更广泛。