代码之家 › 专栏 › 技术社区 › Brandon Durham

满足组件willReceiveProps中不同时设置的多个条件

reactjs javascript

Brandon Durham · 技术社区 · 6 年前

我需要使用 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 在任何给定的时间。这有点像抽奖。

我最终是否需要在状态中临时管理这些条件,然后在它们满足时清除它们?

1 回复 | 直到 6 年前

Oblosys 6 年前

您可以这样做而不必 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 是空的,并且在某个时刻其他两个道具都已更改。(我假设有一次 一 如果为空,则保持不变,但如果不为空,则可以为它添加其他属性。)