React native ReactNative componentDidMount不'；我没接到电话

我有两个屏幕：A和B，与StackNavigator相连

屏幕A是二维码扫描仪。一旦二维码被扫描，它就会导航到屏幕B

在屏幕B中，我使用从屏幕a作为导航参数传递的QR代码进行API调用。我在componentDidMount中触发此API调用

我的问题是：如果我从A导航到B，然后返回A，然后再导航到B，componentDidMount不会被调用，我也无法触发API调用

---

编辑： 这里有一些代码

屏幕A

扫描二维码时调用的处理函数：

handleQRCode = qrCode => {
    NavigationService.navigate('Decode', {qrCode});
};

屏幕B

QR码从导航状态参数中提取，并通过redux用于API调用（startDecode）

componentDidMount() {
    qrCode = this.props.navigation.state.params.qrCode;
    this.props.startDecode(qrCode.data);
}

---

我的问题是componentDidMount只在第一次使用该路由时才被调用。

这是因为B组件只在第一次被访问时才被装载，所以componentDidMount不会被再次调用

我建议您向导航器的

setOnNavigatorEvent

方法传递一个回调，并使用'didAspect'事件。您的回调将在react native navigation发出的每个事件上被调用，并且您可以验证在每次屏幕出现时执行您的逻辑（因此使用了“didAspect”事件）。您可以基于以下内容编写代码：

export default class ExampleScreen extends Component {
  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

  onNavigatorEvent(event) {
    if (event.id === 'didAppear') {
      // do API call here
    }
  }
}

---

在

react导航中

每个屏幕都保持安装状态。这意味着当您返回B时，您可能已经更改了道具，但是在第一次创建此屏幕时已调用了

componentDidMount

有两个选项可供您（AFAIK）处理此情况：

您可以使用

此.props.navigation.push将创建另一个
屏幕B，从而调用
componentDidMount
React生命周期
事件

在屏幕B中，您可以捕捉道具发生变化的事件。 这可以在新的静态生命周期事件中发生

getDerivedPropsFromState

或者可以在不久的将来完成 弃用的

组件将接收道具

---

我遇到了一个类似的问题，我使用

this.props.navigation.addListener（）

来解决它。基本上，强制调用componentDidMount（）可以通过再次按下同一屏幕来实现（我没有尝试过），但堆栈也会不断增长，这不是最优的。因此，当您返回到已在堆栈中的屏幕时，可以使用

addListener（）

查看它是否正在重新聚焦，并且可以在此处复制您的

componentDidMount（）

代码：

class MyClass extends Component {

  someProcess = () => {
    // Code common between componentDidMount() and willFocus()
  }

  componentDidMount() {
    this.someProcess();
  }

  willFocus = this.props.navigation.addListener(
    'willFocus',
    (payload) => {
      this.someProcess();
    }
  );

}

---

当第一次调用

MyClass

时，将调用

componentDidMount

。对于其他时间，当它仍然在堆栈中但只是获得焦点时，

addListener

将被调用

你能分享一段代码吗？@JoseVf我刚刚添加了一些代码我可能错了，但这是wix版本的react导航吗？我无法在堆栈Navigatories上调用setOnNavigatorEvent，它是。检查文档当您尝试使用它时会发生什么？“不是函数”。我用的不是wix的。通过你帖子上的“react native navigation”标签，我以为你在使用wix。我试着像这样推->这个.props.navigation.push（'Decode'，{qrCode}），但是componentDidMount仍然没有被调用。当我进入屏幕B时，我也不一定要更改props，但是我希望它会再次触发API调用，以刷新关于您的第一个回复的本地副本-这真的很奇怪，因为根据定义

push

应该创建一个新实例，从而针对您的第二个回复调用

componentDidMount

-如果您不更改道具，而只是显示已安装的屏幕B，因此不会再次调用

componentDidMount