Question

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

我的意思是完全刷新。我正在使用EXPO btw。任何帮助表示赞赏。对不起，没有例子，我只想在可能的情况下得到这个想法

Answer 1

        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())

Answer 2

请记住，通过调用组件上的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>
}

Answer 3

您可以强制更新组件。检查一下： 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 4

我建议将API调用放入组件中自己的函数中。如果你想在componentDidMount和按钮上点击API，那么创建一个makeApiCall()函数并从componentDidMount中调用它，然后为你的按钮设置适当的onPress道具onPress={this.makeApiCall}

Answer 5

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

第一步

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 }
                );

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

Answer 6

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

const [internetCheck, setInternetCheck] = useState(0);
useEffect(() => {
  //code
}, [internetcheck]);

return(
  <Button title='Retry' onPress(() => setInternetCheck(internetCheck + 1)) />
)

React Native重新加载页面

6 个答案: