Question

我将改善我的第一个React本机应用程序，并且想在发生超时时显示一个重试/重新加载按钮。因此，例如，Web服务在5秒钟内没有响应，我抛出了一个问题。但是现在我想给机会重新加载屏幕。我已经尝试创建一个刷新方法并使用setState，但这没有用。我想我需要再次启动render方法？


 render() {
        if (this.state.connection === true) {
            return (
               <Login />
                    )
      else {
             <View style={styles.errorConnection}>
             <Text>Error, no Connection</Text>
             <Button title="reload" />
             </View>
            }
  }
      ...
   componentDidMount() {
        this.checkConnection();
    }

    checkConnection = async () => {
        let x = await new connection().checkConnection();
        this.setState(connection:x);
    }

Answer 1

您没有提出具体问题，我无法给出具体答案，但是您可以。随时在评论中提问：）

class SomeComponent extends React.Component {
    state = {
        requestFailed: false,
    }

    constructor(props) {
        super(props);

        // This line is very important if you don't know why ask
        this.handleRetry = this.handleRetry.bind(this);
    }

    render() {
        return (
            <>
                <Text>This is some very important stuff here</Text>
                {this.state.requestFailed && (
                    <Button title="Try Again" onPress={this.handleRetry}
                )}
            </>
        )
    }

    handleRetry() {
        this.fetch();
    }

    fetch() {
        fetch('your.url.url')
            .then()
            .catch(() => this.setState({requestFailed: true}))
    }
}

发生超时时重新加载屏幕

1 个答案: