Question

我需要在两个不同的文件上进行api调用。
在一个文件中，我正在componentWillMount内部进行api调用。this.props.getBirdsData();
但是只有在满足if条件的情况下，我才需要在另一个文件中拨打电话。

    if (
      hardTerm === 'ball' && terms === 'bat' &&
      swmming < running
    ) {
      this.props.getSportsData();
    }

当我在if条件内进行通话时，请求发生了多次，因此我没有得到响应。
在第一个文件中，仅当我将其放入componentWillReceiveProps中时，我才能获取数据，不能使用componentDidMount获取数据。
在此链接中，他们告诉componentWillReceiveProps将同步更新状态。在文件一中，您可以告诉他们它们的同步状态如何 componentDidUpdate vs componentWillReceiveProps use case in react this.setState({ radioButtonValues: radioButtonValues });
在下面提供我的相关代码。
你能告诉我如何解决吗

一个工作文件

 componentDidMount() {
    this.props.initialize(this.state);
    this.props.getRun();
    console.log("step1 componentDidMount this.props--->", this.props);
    this.props.getBirdsData();
    // console.log(" componentDidMount this.props.getBirdsData()--->", this.props.adminRun);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.adminRun.length != nextProps.adminRun.length) {
      let adminRuns = nextProps.adminRun.data.filter(val => val.packageType === "Run");
      const radioButtonValues = adminRuns.map(obj => {
        return { label: obj.ownerCode + obj.subPackageDescription, value: obj.ownerCode };
      });
      this.setState({ radioButtonValues: radioButtonValues });
    }
  }

两个不起作用的文件

 componentDidMount() {

        this.props.getSportsData();
    }

     renderMoon() {
        const { terms, hardTerm } = this.state;
        const { classes, handleSubmit, handleSkip, handleBack } = this.props;

        let running = moment(new Date());

        if (this.props.form.Page && this.props.form.Page.values) {

            let swmming = moment(this.props.form.Page.values.swmming, "MM/DD/YYYY");

            if (
                hardTerm === 'ball' && terms === 'bat' &&
                swmming < running
            ) {
                // debugger;

                console.log('renderMoon inside if--->');
                this.props.getSportsData();

            }

        }

    }

仅在满足if条件的情况下才需要进行api调用

0 个答案: