如何使用map()或foreach()向现有的useState数组添加新对象？

在React中，可以使用map()或forEach()方法向现有的useState数组添加新对象。这两个方法都是用于遍历数组的，可以对数组中的每个元素执行相同的操作。

使用map()方法时，它会返回一个新的数组，该数组包含对原始数组中的每个元素执行回调函数后的结果。在回调函数中，我们可以将新的对象添加到原始数组中。

下面是一个示例代码：

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);

  const addNewItem = () => {
    const newItem = { id: 4, name: 'Item 4' };

    setItems(prevItems => [...prevItems, newItem]);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={addNewItem}>Add New Item</button>
    </div>
  );
}

export default App;

在上面的代码中，我们首先定义了一个名为items的状态数组，其中包含了三个初始对象。然后，我们定义了一个addNewItem函数，该函数会在点击按钮时被调用。在这个函数中，我们创建了一个新的对象newItem，然后使用setItems函数更新items数组。在更新函数中，我们使用了扩展运算符(...)来将原始数组中的元素展开，并将新的对象newItem添加到末尾。

最后，我们使用map()方法遍历items数组，并渲染每个对象的名称。

这样，当点击"Add New Item"按钮时，将会向items数组中添加一个新的对象，并且界面上会显示出新的对象。

腾讯云相关产品和产品介绍链接地址：