強制子元素重新渲染（創建API調用）

我喜歡通過每分鐘創建一次新的API調用來創建一個保持最新的視圖。基本上需要觸發所有子組件重新渲染，並再次進行API調用。我試着用forceUpdate（），以及更新道具（下面）。計時器是工作，但子組件未呼籲更多數據強制子元素重新渲染（創建API調用）

目前的組件看起來像這樣的API：

class MyComponent extends React.Component<Props, State> { 

    state = { 
    time: 0 
    }; 

    private interval : any; 

    componentDidMount() { 
    this.interval = setInterval(this._refreshPage.bind(this), 1000); 
    } 
    componentWillUnmount() { 
    clearInterval(this.interval); 
    } 

    _refreshPage() { 
    console.log("refresh"); 
    //this.forceUpdate(); 
    this.setState({ time: Date.now() }); 
    } 

    render() { 
    return (
     <div className="MyComponent"> 

      <Api endpoint={'/api/revenue/total_revenue?' + this.state.time} loadData={true}> 
      <Table /> 
      </Api> 
...

API：

class Api extends React.Component { 

    componentDidMount() { 
    this._makeApiCall(this.props.endpoint); 
    } 
...

我希望在這裏，那當prop查詢參數隨着nuw時間戳（它所做的）改變時，Api組件將重新渲染並調用「新」端點。道具確實會改變，但API不會再被調用，爲什麼？

來源

2017-06-29 Vinnie James

使用不同的lifecycle method。 componentDidMount僅在組件第一次添加到dom時調用，而不是在隨後的重新呈現期間調用。 shouldComponentUpdate可能是你想要的。

來源

2017-06-29 19:13:19 gvfordo

哪個生命週期適合這個？ –

剛剛編輯。 shouldComponentUpdate可能是你想要的，但componentWillReceiveProps也可以。只是不是componentDidMount，因爲它只被調用一次。 – gvfordo

你能詳細說一下，還是提供一個例子？將'_makeApiCall'移動到'shouldComponentUpdate'中似乎沒有問題 –

強制子元素重新渲染（創建API調用）

回答

相關問題