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

Question

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

我的意思是完全刷新。顺便说一句，我正在使用世博会。任何帮助，不胜感激。抱歉，没有示例，如果可能的话，我只是想得到这个想法

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道具onPress={this.fetchData}

Answer 3

class MyScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lastRefresh: Date(Date.now()).toString(),
        }
        this.refreshScreen = this.refreshScreen.bind(this)
    }
    refreshScreen() {
        this.setState({ lastRefresh: Date(Date.now()).toString() })
    }
    render() {
        return (
            <View>
                <Text>My Screen</Text>
                <Text>Last Refresh: {this.state.lastRefresh}</Text>
                <Button onPress={this.refreshScreen} title="Refresh Screen" />
            </View>
        )
    }
}
// also put in main View Date(Date.now()) 

>

请记住，通过在组件上调用 setState 函数，您可以刷新它。 如果有一个按钮可以刷新页面， 我会这样做：

<Button  onPress={() => this.setState({dummy: 1})} />

调用 setState 将更新您的组件，无论您传递给它什么对象。我不确定重新渲染页面是否调用componentDidMount函数，所以也许您需要将 API 调用移动到某个功能func并在您的componentDidMount中调用此函数，并在每次按钮按下事件之后调用此函数。例：

componentDidMount() {
  apiCalls()
}
apiCalls() {
   .... // your code
   this.setState({dummy: 1})
}
render() {
  <View>
    ...
    <Button  onPress={this.apiCalls.bind(this)} />
    ...
  </View>
}

我正在使用Functional component并执行以下操作。我在useEffect中使用状态作为依赖项，并在按下按钮时更改该状态。

const [internetCheck, setInternetCheck] = useState(0);
useEffect(() => {
  //code
}, [internetcheck]);
return(
  <Button title='Retry' onPress(() => setInternetCheck(internetCheck + 1)) />
)

根据这个问题的浏览量，很多人被重定向到这里，就像我一样。所以，我的答案可能不相关，但它肯定会帮助某人。

为了重新渲染屏幕，我使用了useIsFocused钩子@react-navigation/native

useEffect(() => {
    if (isFocused){
        console.log("Assi Gai Badal");
        //Update the state, it will cause a re-render
    }
}, [isFocused]);

通过使用

withNavigationFocus高阶组件，它可以在基于类的组件中使用。此 HOC 包装所需的组件类并将 isFocused 道具传递给它。

您可以通过在功能组件中执行以下操作来简单地刷新 React Native 或 Expo 应用程序。

步骤 1

const [refreshPage, setRefreshPage] = useState("");

步骤 2然后在您要使用的任何组件中使用它并刷新页面，例如在警报中

                Alert.alert(
                    "End of News",
                  "You have read all latest news for today ",
                  [
                    {
                      text: "Refresh Page",
                      onPress: () => {
                        setRefreshPage("refresh");
                        
                      },
                    },
                  ],
                  { cancelable: false }
                );

它会带来警报，当用户单击刷新页面按钮时，页面将被刷新。

我也遇到了同样的问题，然后我发现你只需要 Hooks 或 useState 来解决刷新问题。在我的刷新随机甲板的情况下

    const [random1, setRandom1] = useState(
    Math.floor(Math.random() * deck.length) + 1
    );
    <Image source={deck[random1]} style={styles.img} />
    <Button
    title="Refresh?"
    onPress={() => {
      setRandom1(Math.floor(Math.random() * deck.length) + 1);
    }} />

我希望这可能会有所帮助。