Question

我有这个功能：

  handleClickSuitClass(rankClass, suitClass) {
    // first part I'd like to run AND return no matter what
    const newState = update(this.state, { [rankClass]: { [suitClass]: { $set: !this.state[rankClass][suitClass] } } });
    this.setState(newState);

    // second part I'd like to run after first part returned
    const presetId = this.state.preset.current;
    if (presetId !== '') {
      updateSuitClass.call({ _id: presetId, rankClass, suitClass }, (err) => {
        if (err) {
          Bert.alert(err.reason, 'danger');
          const revertState = update(this.state, { [rankClass]: { [suitClass]: { $set: !this.state[rankClass][suitClass] } } });
          this.setState(revertState);
        }
      });
    }
  }

我希望无论如何都要运行前两行，这就是setState处于一个状态，该状态会在已单击的项目上切换check（tick）标记。

然后（在第一部分返回后）如果为true则调用Meteor验证的方法来更新数据库上的项目。如果出现错误，请通过再次切换状态恢复到原始状态。

目前它有效，但速度很慢。如何才能使前两行先运行并设置状态，然后在单个函数中运行第二部分？

Answer 1

setState()将回调作为其第二个参数。来自React's documentation：

第二个（可选）参数是一个回调函数完成setState后执行并重新呈现组件。

所以你可以这样做：

this.setState(newState, function() {
   // Code to be executed after...
});

Answer 2

代码可以简化如下：

const suitState = this.state.rankClass.suitClass;
this.setState({ 'rankClass.suitClass' : !suitState });

稍后，在还原时

this.setState({ 'rankClass.suitClass' : suitState });

首先返回函数的一部分，然后完成剩下的工作

2 个答案: