react如何修改state数据
修改 React 状态的常见方法
使用 useState Hook 的函数式更新
通过 useState Hook 提供的更新函数修改状态，适用于函数组件。直接传递新值或使用函数式更新（依赖前一个状态时更安全）：
const [count, setCount] = useState(0);
// 直接更新
setCount(1);
// 函数式更新（依赖前值）
setCount(prevCount => prevCount + 1);使用 useReducer 管理复杂状态
当状态逻辑较复杂时，useReducer 可通过派发 action 来集中管理状态变更：
const [state, dispatch] = useReducer(reducer, initialState);
// 通过 dispatch 触发更新
dispatch({ type: 'INCREMENT' });类组件中的 setState
在类组件中通过 this.setState 更新状态，支持对象合并或函数式更新：
this.setState({ count: 1 });
// 函数式更新
this.setState(prevState => ({
count: prevState.count + 1
}));处理对象或数组状态
修改对象或数组时需避免直接突变（mutate），应创建新引用：
const [user, setUser] = useState({ name: 'Alice', age: 25 });
// 正确做法：展开运算符创建新对象
setUser({ ...user, age: 26 });
const [items, setItems] = useState(['a', 'b']);
// 正确做法：使用 concat 或展开运算符
setItems([...items, 'c']);注意事项
- 状态更新是异步的，连续调用可能不会立即反映最新值。
- 对于嵌套对象，考虑使用库如 Immer 简化不可变更新。
- 避免在渲染中直接修改状态，否则可能导致无限循环。
