react 如何修改state

修改 state 的方法

在 React 中，state 是组件内部的可变数据，直接修改 state 会导致不可预期的行为。正确的方式是通过 setState（类组件）或状态更新函数（函数组件）来修改。

类组件中使用 setState

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

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

如果新 state 依赖于之前的 state，建议使用函数形式：

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

函数组件中使用状态钩子

在函数组件中，通过 useState 钩子定义 state，并使用返回的更新函数修改 state。

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

// 直接设置新值
setCount(1);

// 基于之前的值更新
setCount(prevCount => prevCount + 1);

修改嵌套 state

当 state 是对象或数组时，需注意避免直接修改原数据，而是创建新对象或数组。

修改对象 state

const [user, setUser] = useState({ name: 'Alice', age: 25 });

// 正确方式：展开原对象并覆盖修改的字段
setUser({ ...user, age: 26 });

修改数组 state

const [items, setItems] = useState(['a', 'b', 'c']);

// 添加元素
setItems([...items, 'd']);

// 删除元素
setItems(items.filter(item => item !== 'b'));

// 更新元素
setItems(items.map(item => item === 'a' ? 'A' : item));

批量更新 state

React 会自动合并多次 setState 调用，但使用函数式更新可以确保基于最新 state。

// 可能不会按预期工作
setCount(count + 1);
setCount(count + 1);

// 推荐方式
setCount(prev => prev + 1);
setCount(prev => prev + 1);

异步更新注意事项

setState 和状态更新函数是异步的，如果需要立即获取更新后的 state，可以在 useEffect 钩子中监听 state 变化。

useEffect(() => {
  console.log('Count updated:', count);
}, [count]);