react 如何修改state

修改 state 的基础方法

在 React 中，state 的修改必须通过 setState 方法（类组件）或 state 更新函数（函数组件）。直接修改 state 会导致组件不会重新渲染，且可能引发不可预期的行为。

类组件中使用 setState：

this.setState({ key: newValue });

函数组件中使用 state 更新函数：

const [state, setState] = useState(initialValue);
setState(newValue);

基于当前 state 更新

当新 state 依赖于当前 state 时，应使用函数式更新形式，避免因异步更新导致的问题。

类组件中：

this.setState((prevState) => ({ count: prevState.count + 1 }));

函数组件中：

setCount((prevCount) => prevCount + 1);

修改对象或数组 state

修改对象或数组时，需要创建新的引用，遵循不可变数据原则。使用展开运算符或相关方法创建新对象/数组。

修改对象：

setUser({ ...user, name: 'New Name' });

修改数组：

setItems([...items, newItem]);
setItems(items.filter(item => item.id !== idToRemove));

批量 state 更新

React 会自动合并多次 setState 调用，但在事件处理函数外可能需要手动批量更新。函数组件中可以使用 useReducer 管理复杂 state。

const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'UPDATE', payload: newData });

异步 state 更新注意事项

state 更新是异步的，如果需要基于更新后的 state 执行操作，可以使用 useEffect 钩子或 setState 的回调函数（类组件）。

函数组件示例：

useEffect(() => {
  // 在 state 更新后执行
}, [state]);

类组件示例：

this.setState({ count: newCount }, () => {
  console.log('State updated:', this.state.count);
});