Question

我正在使用React Native Navigator组件，并且我使用其renderScene方法设置了路由：

<Navigator
     ref="navigator"
     initialRoute={{name:'Main'}}
     renderScene={(route,navigator)=>this.renderScene(route,navigator)} />

然后，在我的renderScene中，我想调用一个外部方法toggleSideMenu，如下所示：

toggleSideMenu() {
    this.setState({
       menuDisableGestures: false
    });
}

renderScene(route, navigator) {
    switch (route.name) {
      case "SecondView":
        this.toggleSideMenu.bind()
        return <SecondView navigator={navigator} />
 ....

但是，永远不会调用toggleSideMenu。如果我将通话从this.toggleSideMenu.bind()更改为this.toggleSideMenu()，我会收到错误消息：

无法在现有状态转换期间更新（例如在render内）。渲染方法应该是道具和状态的纯函数。

关于如何在renderScene中调用外部函数的任何想法？

Answer 1

您可以从renderScene函数调用函数而不会出现任何问题。使用this.toggleSideMenu(); 但是你在这里做的是，你正在更新toggleSidemenu函数中的状态。

如this中所述，

问题是setState会导致重新渲染（可能取决于shouldComponentUpdate）。如果在render函数中有一个setState调用，它将触发另一个渲染。你可能最终会进行无限循环的重新渲染。由于某些异步操作（实际上它很常见），没有什么能阻止你使用setState。只要它不是在状态更新中运行的组件的渲染或其他一些生命周期方法中就可以了（ifComponentUpdate是另一个，因为你以相同的方式结束了无限循环）。

因此，如果从toggleSidemenu中删除setState，那么函数将毫无问题地执行。

React Native Navigator，在RenderScene中调用函数时遇到问题

1 个答案: