设置状态后重新渲染状态

Question

我想获取数据，如果获取时出错。我想等待 1000 秒，然后再次获取数据。

问题是在方法 settingTimeout() this.setState({timerStatus: true});我期待重新渲染整个应用程序并在 console.log 中渲染超时。但由于某种原因，它没有这样做。我尝试在 settingTimeout() 中使用 this.forceUpdate();没有太多的运气。 React similiar example

this.state = {
      retryTimer: 1000,
      timerStatus: false,
    }
  }
  componentDidMount(){
    if(this.state.timerStatus){
      console.log('timeout');
    }
    this.newGame();
  }

  newGame =() => {
    Axios.get(
      this.state.apiBase + 'nexGame',
      this.state.headers
    )
    .then(response =>{
     console.log(response)
      }
    })
    .catch(error =>{
      this.settingTimeout();
    })
  }
  settingTimeout = () =>{
    this.setState({timerStatus: true});
    if(this.state.retryTimer === 0){
      this.newGame();
    }
  }

Answer 1

您可以尝试以下方法（解释在小提琴下方）：

let counter = 0;

class App extends React.Component {
    timer;
    
    constructor(props) {
        super(props);
        
        this.state = {
            data: "",
            loading: true,
            fetchError: false            
        }
    }
    
    componentDidMount() {
        /* Simulating a fetch with setTimeout. */
        const random = Math.floor(Math.random() * 1000) + 100;
        
        setTimeout(() => {
            /* Here you would write .then(). */
            if (counter === 2) {
                this.setState({loading: false});
            }
            
            /* Here you would write .catch(). */
            if (counter === 0) {
                this.setState({fetchError: true});
                this.timer = setInterval(this.handleFetch, 1000);
            }
            
            counter++;
        }, random);
    }
    
    handleFetch = () => {
        /* Simulating a fetch with setTimeout. */
        const random = Math.floor(Math.random() * 1000) + 100;
        setTimeout(() => {
            /* This would be the then(), where you save the data. */
            if (counter === 2) {
                clearInterval(this.timer);
                this.setState({loading: false, fetchError: false, data: "YES!!"})
            }
            
            /* In this case, if the fetch fails, you do nothing. */
                                  
            counter++;
        }, random);
    }
    
    render() {
        const {fetchError, loading, data} =  this.state;
        return (
            <React.Fragment>
                {loading && fetchError && <p>Error in Fetch</p>}
                {loading && !fetchError && <p>Loading</p>}
                {!loading && !fetchError && <p>{this.state.data}</p>}
           </React.Fragment>
        );
    }
}

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

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

首先，我使用setTimeout 来模拟提取。此外，为了模拟提取错误，我使用了counter 变量：当它达到2 的值时，则认为提取正确，否则认为失败。
说了这么多，怎么回事？在componentDidMount 中，您运行您的第一次提取：而不是if (counter === 2)，您应该编写提取的.then()（因此，当它正确运行时）。在该回调中，您只需将 this.state.loading 设置为 false。
否则，您应该编写catch() 语句而不是if (counter === 0)：在这种情况下，您创建interval 调用每个handleFetch() 函数1000ms。请注意，在本例中，您将 this.state.fetchError 设置为 true：这样您可以向用户提供更好的反馈。

现在，在handleFetch() 内部执行fetch: 再次，如果它正确结束，您可以将this.state.loading 和this.state.fetchError 设置为false，并保存状态中的数据。 否则，您只需等待另一个 1000ms 进行下一次提取。

Answer 2

如果前一个电话失败，您似乎想每隔 1 秒再拨打一次电话，对吧？

我不确定您是否需要重新渲染您的应用才能做到这一点。如果你想重做这个调用，你可以使用组件 https://reactjs.org/docs/react-component.html#updating 的 react 生命周期

与：

shouldComponentUpdate(nextProps, nextState) {
  if(this.nextState.timerStatus = true) { 
    setState({ timerStatus: false });
    this.newGame();
}

并且在你的函数 settingTimeout 上设置一个超时时间，当经过 1s 时，将 timerStatus 的状态更改为 true。 React 会监视这个，将 timerStatus 设置为 false 并重新调用。如果通话正常，您将得到答案，否则您将再次等待 1 秒并重新拨打电话，等等。