usestate异步更新数组

在 React 中，useState 返回的第一个元素是状态值，第二个元素是状态值的更新函数。当我们使用 useState 更新一个数组时，需要注意两个问题：

1. 使用展开运算符创建新的数组来更新状态值，而不是直接修改原数组。
2. useState 的更新函数是异步的，不能保证更新后的值是最新的。如果需要使用最新的状态值，可以使用 useEffect 监听状态值的变化。

下面是一个使用 useState 异步更新数组的示例代码：

import React, { useState, useEffect } from 'react';

function App() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([...items, "New Item"]);
  };

  useEffect(() => {
    console.log(items);
  }, [items]);

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在上面的代码中，我们定义了一个名为 items 的数组状态，以及一个名为 addItem 的函数，用于向数组中添加新的元素。当我们点击“Add Item”按钮时，会调用 addItem 函数并使用展开运算符创建一个新的数组来更新 items 的状态值。然后，我们使用 useEffect 监听 items 的变化，并在控制台中打印出最新的 items 数组。