React 状态处理不当引发的 Bug：前车之鉴

2023-10-22 01:22:15

前言

React 作为当今最受欢迎的前端框架之一，以其强大的状态管理能力而著称。然而，如果不当处理状态，也可能导致一系列问题。本文将通过一个真实案例，剖析因错误处理状态而引发的 Bug，并分享解决方法，帮助你避免同样的错误，提升你的 React 开发技能。

正文

在开发一个表单组件时，我们希望在用户对数据进行修改后，只有当内容有修改时，保存按钮才可以点击，否则保存按钮处于置灰状态。为了实现这个功能，我们使用了 Redux 来管理数据状态，并在组件的 componentWillReceiveProps 生命周期方法中，通过比较新旧 Redux 中的数据来判断内容是否有修改。

componentWillReceiveProps(nextProps) {
  const isModified = this.props.data !== nextProps.data;
  this.setState({ isModified });
}

然而，在实际使用中，我们发现了一个奇怪的 Bug：当用户修改数据后，保存按钮并没有立即处于可点击状态，而是需要等待一段时间才会激活。经过一番排查，我们发现问题出在 componentWillReceiveProps 方法中。

componentWillReceiveProps(nextProps) {
  const isModified = this.props.data !== nextProps.data;
  this.setState({ isModified }, () => {
    // 保存按钮的逻辑
  });
}

原来，我们在 componentWillReceiveProps 方法中，将 isModified 状态的更新和保存按钮的逻辑放在了同一个回调函数中。这导致在状态更新后，保存按钮的逻辑并没有立即执行，而是被推迟到下一次事件循环。因此，用户在修改数据后，需要等待一段时间，直到下一次事件循环开始，保存按钮才会处于可点击状态。

解决方法

为了解决这个问题，我们将 isModified 状态的更新和保存按钮的逻辑分成了两个独立的回调函数。这样，在状态更新后，保存按钮的逻辑会立即执行，而不会被推迟到下一次事件循环。

componentWillReceiveProps(nextProps) {
  const isModified = this.props.data !== nextProps.data;
  this.setState({ isModified }, () => {});
  this.handleSaveButton();
}

handleSaveButton() {
  // 保存按钮的逻辑
}