Question

如何在每次访问页面/屏幕时触发 componentDidMount() 或 useEffect Hook？

2017-11-18

110012

javascript react-native expo

所以我有一个带有活动的应用程序。该应用程序在开始时检查互联网连接。如果没有互联网连接，它将显示一个带有刷新页面按钮的屏幕。问题是我的 API 调用（Axios）位于 componentDidMount() 上，它在第一次渲染后只被调用一次。有什么方法可以重新加载页面以便它再次调用 componentDidMount ？

我的意思是完全刷新。顺便说一句，我正在使用 EXPO。任何帮助都值得赞赏。抱歉，没有例子，我只是想尽可能了解一下这个想法

Answer 1

您可以强制更新组件。检查这个： https://reactjs.org/docs/react-component.html#forceupdate

它将重新渲染组件。

检查这个例子：

class App extends Component{
  constructor(){
    super();
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
          <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
            <h4>Random Number : { Math.random() }</h4>
          </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Answer 2

我建议将您的 API 调用放在组件内自己的函数 fetchData 中。 fetchData 也可以在成功获取后 setState ，这将导致重新渲染并显示新数据。如果您想在 componentDidMount 和按钮单击时获取新数据，请创建一个 fetchData 函数并从 componentDidMount 中调用该函数，然后为您的按钮适当设置您的 onPress prop onPress={this.fetchData

Answer 3

尝试使用此示例并检查一下也检查一下

 componentDidMount() {
            this.props.navigation.addListener("focus", () => {
                // do something here
            });
        }