ComponentDidUpdate 无限循环答案

【问题标题】：ComponentDidUpdate infinite loopComponentDidUpdate 无限循环
【发布时间】：2021-07-12 17:52:13
【问题描述】：

我是 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));
  };

【问题讨论】：

如果组件更新，您发出请求，这会更新组件 --- 这会导致无限循环，不是吗？
是的，没错。现在我不知道如何避免这种情况，也不知道应该在哪里调用该函数。
为什么首先需要componentDidUpdate？为什么不componentDidMount ？然后它只会获取一次数据。
我认为这会有所不同，因为如果发出不同的请求，它将更新屏幕而无需刷新屏幕。我在 componentDidMount 中移动了该函数，它工作正常。谢谢。

标签： reactjs react-native firebase-realtime-database react-native-firebase react-component

【解决方案1】：

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

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

根据您的要求，您可以执行以下任一操作。

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

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

【讨论】：