Question

一旦满足三个条件，我就需要使用componentWillReceiveProps()来调用组件中的方法。这些条件中的两个将当前道具与下一个道具进行比较，并且这两个条件通过Ajax请求接收其值。问题在于，并非所有条件在同一时间都为真。

例如。

export class Styles extends Component {
    componentWillReceiveProps(nextProps) {
        if (
            !_.isEmpty(nextProps.one) &&                    // set via ajax request
            !isEqual(this.props.two, nextProps.two) &&
            !isEqual(this.props.three, nextProps.three)     // set via ajax request
        ) {
            this.myMethod();
        }
    }

    myMethod() {
        … do something
    }

    render() {
        return (
            <div />
        )
    }
}

因为其中两个道具都设置了Ajax响应，所以我不确定何时设置这些值以及它们何时会满足条件。我显然需要实现三个true值才能调用this.myMethod()，但是在任何给定时间，我都会得到true/false的各种组合。有点彩票的情况。

我最终是否需要暂时管理每个状态，然后在遇到这些情况时将其清除？

Answer 1

您可以在不弃用componentWillReceiveProps的情况下执行以下操作：

export class Styles extends Component {
  isDirtyTwo = false;
  isDirtyThree = false;
  ..
  componentDidUpdate(prevProps) {
    this.isDirtyTwo = this.isDirtyTwo || !isEqual(prevProps.two, this.props.two);
    this.isDirtyThree = this.isDirtyThree || !isEqual(prevProps.three, this.props.three);
    if (!_.isEmpty(this.props.one) && this.isDirtyTwo && this.isDirtyThree) {
      this.isDirtyTwo = false;
      this.isDirtyThree = false;
      this.myMethod();
    }
  }
  ..
}

当myMethod为空并且其他两个道具都在某个时刻发生变化时，它将调用one。（我假设一旦one为空，它将保持这种状态，但是如果没有，则可以为其添加另一个属性。）

满足在componentWillReceiveProps中未同时设置的多个条件

1 个答案: