2

我是 React Native 的新手，我不知道您是否可以通过这种方式使用 componentDidUpdate。我想要做的是在 componentDidUpdate 中调用 getRiderRequestDetails() 以在发出新请求时从 Firebase 检索数据。我得到一个无限循环。我怎样才能避免这种情况？

componentDidUpdate(prevState) {
    getRiderRequestDetails();
   
  }

 getRiderRequestDetails = () => {
    AsyncStorage.getItem("driverId")
      .then((result) =>
        firebase
          .database()
          .ref("Ride_Request/" + result)
          .once("value")
          .then(function (snapshot) {
            if (snapshot.exists()) {
              DriverHomeContents.RiderID = snapshot.child("riderID").val();
              DriverHomeContents.RiderPickUpName = snapshot
                .child("pickUpName")
                .val();
              DriverHomeContents.RiderDropUpName = snapshot
                .child("dropOffName")
                .val();
            }
          })
          .then(
            () => {
              console.log(
                "fine " +
                  DriverHomeContents.RiderDropUpName +
                  " " +
                  DriverHomeContents.RiderPickUpName
              );
              if (!DriverHomeContents.RiderID == "") {
                this.setState({ isModalVisible: true });
              }

              firebase
                .database()
                .ref("RiderIds/" + DriverHomeContents.RiderID + "/Details")
                .once("value")
                .then(function (snapshot) {
                  DriverHomeContents.Firstname = snapshot
                    .child("firstname")
                    .val();
                  DriverHomeContents.Lastname = snapshot
                    .child("lastname")
                    .val();
                })
                .then(
                  () => {
                    console.log("fine" + DriverHomeContents.Firstname);
                  },
                  (error) => {
                  }
                );
            },
            (error) => {
              console.error("error" + error);
            }
          )
      )
      .catch((e) => console.log("err", e));
  };
4

1 回答 1

1

https://reactjs.org/docs/react-component.html#componentdidupdate

如果您阅读上面链接上的描述，您将看到无限渲染必然会发生，因为您正在更新某些内容，然后导致生命周期方法再次运行并发生循环。

根据您的要求，您可以执行其中任何一项。

  • 检查哪些其他生命周期方法适合您的用例。
  • 找出不应该在 cDidUpdate 中调用的条件。例子。检查是否this.props.someProp !== prevProps.someProp然后进行函数调用。

注意：传递给 cDidUpdate 的第一个参数previous props不是以前的状态。

于 2021-04-18T09:04:28.680 回答