如何在 React.js 中合并两个数组

作者

在 React.js 中合并两个数组

How to merge two Arrays in React.js

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

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

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

应用程序.js
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

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

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

应用程序.js
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保证会以当前（最新）状态调用。

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

索引.ts
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

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

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

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

索引.ts
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 中合并数组。

索引.ts
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 应用程序中使用得更广泛。

–

发表评论