react 如何修改state

修改 React 组件中的 state

在 React 中，修改 state 必须通过特定的方法，直接修改 state 对象不会触发组件的重新渲染。以下是几种修改 state 的方法。

类组件中修改 state

在类组件中，使用 this.setState() 方法来更新 state。该方法可以接受一个对象或函数作为参数。

this.setState({ key: newValue });

如果新的 state 依赖于之前的 state，可以传递一个函数给 setState。

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

函数组件中修改 state

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

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

如果新的 state 依赖于之前的 state，可以传递一个函数给更新函数。

setState((prevState) => {
  return { ...prevState, key: newValue };
});

更新对象或数组类型的 state

当 state 是对象或数组时，确保不要直接修改原数据，而是创建一个新的对象或数组。

setState({
  ...state,
  key: newValue
});

对于数组，可以使用展开运算符或数组方法（如 map、filter）来更新。

setState([...state, newItem]);

注意事项

避免直接修改 state 对象或数组，否则可能导致组件不重新渲染或产生不可预期的行为。

// 错误示例
state.key = newValue;
setState(state); // 不会触发重新渲染

始终使用 React 提供的更新方法（如 setState 或 useState 的更新函数）来修改 state，以确保组件正确响应变化。