添加新元素 useState 数组

在React中，我们经常需要在状态中存储一些数组。使用useState，我们可以很容易地声明和更新这些数组。本文将介绍如何声明和更新使用useState声明的数组。

声明一个useState数组

声明一个useState数组的语法如下：

const [array, setArray] = useState(initialState);

其中，initialState是状态的初始值。useEffect返回一个长度为2的数组。第一个元素array是当前的状态值，第二个元素setArray是更新状态值的函数。在上面的语法中，我们通过解构数组将状态值赋值给了array变量，将更新函数赋值给了setArray变量。

例如，下面的代码声明了一个状态数组list，它的初始值为空数组。

import React, { useState } from 'react';

function MyComponent() {
  const [list, setList] = useState([]);

  return (
    <div>
      {/* render list */}
    </div>
  );
}

添加新元素

要向数组中添加新元素，您首先需要将数组的当前状态值存储在一个临时变量中。您可以使用...运算符来复制当前数组的值。

const newArray = [...array];

然后，您可以使用JavaScript的push方法将新元素添加到数组中。

newArray.push(newElement);

最后，您可以使用更新函数setArray将新数组存回状态中。

setArray(newArray);

例如，在下面的代码片段中，我们首先将当前状态数组存储在临时变量中（这里我们使用list），然后使用push方法将新元素newItem添加到数组中。

function MyComponent() {
  const [list, setList] = useState([]);

  function handleAddItem() {
    const newList = [...list];
    newList.push(newItem);
    setList(newList);
  }

  return (
    <div>
      {/* render list */}
      <button onClick={handleAddItem}>Add Item</button>
    </div>
  );
}

总结

在React中，声明和更新使用useState声明的数组很容易。要向数组中添加新元素，请先复制当前状态数组，然后使用push方法将新元素添加到最后，最后将新数组存回状态中。