Question

当我单击项目菜单时，例如，我有React导航的Drawer Navigator：

1：单击项目A（屏幕A）->从componentDidMount获取服务器上的一些数据，将一些数据输入到InputText，...

2：打开抽屉菜单，然后单击项目B（屏幕B），然后再次打开菜单，然后单击项目A（屏幕A）->我在仍未加载但未重新加载之前获取了一些数据，我输入的一些数据。

我正在使用反应导航3.1

import { StackActions, NavigationActions, DrawerItems } from 'react-navigation'

<ScrollView>
         <DrawerItems {...this.props}
                      onItemPress={({route, focused}) => {
                        console.log(route)
                        // this.resetStack(route, focused)
                        this.props.onItemPress({ route, focused })
                        //i try to reset at there but nothing
                      }}
         />

所以有人知道如何解决吗？谢谢

更新：我找到了解决方案

仅使用：

resetStack = (name, focused) => {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'MenuBar' })],
    })
    this.props.navigation.dispatch(resetAction)
    this.props.navigation.navigate(NavigationActions.navigate({
      routeName: 'MenuBar',
      action: NavigationActions.navigate({ routeName: name.routeName })
    }))
  }

...
<DrawerItems {...this.props}
                       onItemPress={({route, focused}) => {
                         this.resetStack(route, focused)
                       }}
          />

不是最佳解决方案，但我找不到其他更好的方法：）

Answer 1

class YourComponent extends React.Component {
    state = {
        yourData: null
    };

    fetchData = () = {
        // get some data
    };

    componentDidMount() {
        // you fetched data here:
        const data = fetchData();
        this.setState({ yourData: data });
    }

    componentWillReceiveProps(nextProps) {
        // check if you need to re-fetch data ... in case of new props:
        if (needToReloadData) {
            const data = fetchData();
            this.setState({ yourData: data });
        }

        if(needToReset) {
            this.setState({ yourData: null });
        }
    }
}

从抽屉中选择屏幕A的

componentDidMount事件将被调用，然后单击屏幕B等其他屏幕==>屏幕A从屏幕上卸下……这就是为什么重新打开 screenA ==>屏幕A的componentDidMount事件再次被调用...

为了解决点击时重新加载数据的问题，您需要在componentWillReceiveProps中包含重置逻辑：

componentDidMount事件。 //将在首次点击时执行。
componentWillReceiveProps //将在随后的下一次点击中执行

单击Drawer Navigator 3.0中的项目菜单时如何重设屏幕

1 个答案: