react 如何修改state

修改 React 组件的 state

在 React 中修改 state 需要使用 setState 方法（类组件）或 state 更新函数（函数组件）。以下是具体方法：

类组件中使用 setState

在类组件中，通过调用 this.setState() 来更新 state。该方法接受一个对象或函数作为参数，用于合并到当前 state。

this.setState({ count: this.state.count + 1 });

使用函数式更新可以避免依赖当前 state 的旧值：

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

函数组件中使用 useState Hook

在函数组件中，使用 useState Hook 来管理 state。通过调用 state 更新函数来修改 state。

const [count, setCount] = useState(0);

// 直接更新
setCount(1);

// 函数式更新
setCount(prevCount => prevCount + 1);

修改嵌套对象或数组

当 state 是对象或数组时，需要创建新的引用以避免直接修改原 state。

// 对象
const [user, setUser] = useState({ name: 'John', age: 30 });
setUser({ ...user, age: 31 });

// 数组
const [items, setItems] = useState(['a', 'b']);
setItems([...items, 'c']);

批量更新

React 会自动批量处理多个 state 更新以提高性能。在事件处理函数或生命周期方法中的多个 setState 调用会被合并。

异步更新

setState 和 state 更新函数是异步的。如果需要立即获取更新后的 state，可以在 useEffect Hook 或 setState 的回调函数中处理。

useEffect(() => {
  console.log(count); // 更新后的值
}, [count]);

注意事项

避免直接修改 state，如 this.state.count = 1 或 items.push('new')，这不会触发重新渲染。始终使用 React 提供的更新方法。