反應有條件的渲染沒有更新子組件中的狀態

我有一個奇怪的問題，有條件的渲染，其中狀態是'下降到子組件。我有一個查看器模板，帶有PDF查看器組件和Web查看器組件（使用iframe）。根據從服務器返回的值作爲media_type值，合適的組件將被渲染。這一切工作正常。反應有條件的渲染沒有更新子組件中的狀態

從外部看，我有一個兄弟組件負責在內容中搜索，爲此，它必須將搜索查詢傳遞給父組件，父組件然後更新父狀態，然後傳遞給孩子作爲道具。原因是不同的內容需要不同的搜索實現，這是在查看器組件內部實現的。

顯然，我的條件呈現方法是打破子組件中的搜索查詢prop更新。當prop更改時，沒有任何組件更新方法被調用，因此搜索執行永遠不會被調用。

同級組件調用的公共父這個方法：

/** 
* Search query execution handler. Passes the state as a prop to the catalog for search 
* execution 
* @param e Keyword or query string from SearchPanel 
*/ 
searchQueryHandler(e) { 
    this.setState({ 
     searchRequest: e 
    }); 
}

父組件渲染方法

render() { 

    let viewer = <div />; 

    if (this.state.link.media_type === 1) 
     viewer = <PDF file={this.state.link.id} 
         setOverlayVisibility={this.props.setOverlayVisibility} 
         searchQuery = {this.state.searchRequest} 
         searchMatchHandler={this.searchMatchHandler} 
         searchResultSelection={this.state.searchResultSelection} 
     />; 
    else if (this.state.link.media_type !== '') 
     viewer = <WebViewer link={this.state.link} 
           setOverlayVisibility={this.props.setOverlayVisibility} 
           searchQuery={this.state.searchRequest} 

     />; 

    return (
     <Content> 
      <ContentLeft> 
       {viewer} 
      </ContentLeft> 
      <ContentRight> 
       <SidePanel institution={this.state.institution} 
          link={this.state.link} 
          searchQueryHandler={this.searchQueryHandler} 
          searchResults={this.state.searchResults} 
          searchResultClickHandler={this.searchResultClickHandler} 
       /> 
      </ContentRight> 
     </Content> 
    ) 
}

現在，searchQueryHandler方法正被事件命中SidePanel發射了，但componentWillReceiveProps,shouldComponentUpdate,willComponentUpdate均不在PDF或WebViewer之內。我懷疑這與render中的if/else塊有關，但不知道如何實現它。

來源

2017-08-11 Jason

對此的回答是父組件被阻止更新shouldComponentUpdate實現，該實現沒有考慮到搜索查詢的新狀態。因此，它始終返回false，從而阻止狀態更新傳播到適當的子組件。

shouldComponentUpdate(nextProps, nextState) { 
    return this.state.link !== nextProps.link || this.state.searchRequest !== nextState.searchRequest; 
}

是修復。

這麼簡單，但卻令人沮喪。

來源

2017-08-11 10:59:38 Jason

是應該更新的雙刃劍:) –

反應有條件的渲染沒有更新子組件中的狀態

回答

相關問題