react如何向求组中添加值
向 React 数组添加值的方法
在 React 中，向数组添加值通常涉及状态管理。以下是几种常见的方法：
使用 useState 和展开运算符
通过 useState 钩子管理数组状态，使用展开运算符添加新值：
const [items, setItems] = useState([]);
const addItem = (newItem) => {
setItems([...items, newItem]);
};使用 concat 方法
concat 方法返回新数组，适合不可变更新：
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>
);
}
