当前位置：首页 > React

react如何向求组中添加值

2026-01-26 07:07:48React

向 React 数组添加值的方法

在 React 中，向数组添加值通常涉及状态管理。以下是几种常见的方法：

使用 `useState` 和展开运算符

通过 useState 钩子管理数组状态，使用展开运算符添加新值：

react如何向求组中添加值

const [items, setItems] = useState([]);

const addItem = (newItem) => {
  setItems([...items, newItem]);
};

使用 `concat` 方法

concat 方法返回新数组，适合不可变更新：

react如何向求组中添加值

const addItem = (newItem) => {
  setItems(items.concat(newItem));
};

使用回调形式的 `setState`

当新状态依赖旧状态时，推荐使用回调形式：

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

处理对象数组

若数组元素是对象，确保对象也是不可变更新：

const addUser = (newUser) => {
  setUsers([...users, { ...newUser, id: Date.now() }]);
};

注意事项

直接修改原数组（如 push）不会触发重新渲染。
复杂场景可考虑 useReducer 或状态管理库（如 Redux）。
对于大型数组，确保更新逻辑高效以避免性能问题。

示例完整代码

import React, { useState } from 'react';

function App() {
  const [list, setList] = useState(['Apple', 'Banana']);

  const handleAdd = () => {
    setList([...list, 'Orange']);
  };

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