setState(…)：只能更新一个挂载或挂载的组件

Question

这是代码。不知道为什么会出现问题。

class TeacherForm extends Component {
  constructor({ data }) {
    super();

    this.isUpdatingForm = !! data;
    this.state = Object.assign({ ... });

    this.handleSubmit = this.handleSubmit.bind(this);
    this.removeTeacher = this.removeTeacher.bind(this);
  }

  handleChange(value, field) {
    this.setState({ shouldUpdate: true, [field]: value });
  }

  handleSubmit(e) {
    e.preventDefault();
    const { name, subjects, parttime, timing } = this.state;

    if (this.isUpdatingForm) {
      return update.call({
        _id: this.props.data._id,
        transaction: { name, subjects, parttime, timing },
      }, () => this.setState({ shouldUpdate: false }));
    }

    return add.call();
  }

  removeTeacher() {
    return remove.call(this.props.data._id);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         ...
      </form>
    );
  }
}

update.call 回调中的 handleSubmit 方法抛出错误。这通常会在我调用 removeTeacher 并且列表更新并且该组件卸载时出现。

Answer 1

听起来回调() => this.setState({ shouldUpdate: false }) 是在组件卸载后执行的。那可能吗？如果是这样，解决此问题的一种方法是将这部分替换为

return update.call({
  _id: this.props.data._id,
  transaction: { name, subjects, parttime, timing },
}, () => { !this.unmounted && this.setState({ shouldUpdate: false }); });

添加

componentWillUnmount() {
  this.unmounted = true;
}