React只渲染一個子組件

我正在試圖根據需要填充一個TreeView組件。我在componentDidMount函數中獲取數據，然後將這些數據插入到主要組件狀態的數組中。 componentDidUpdate用於將數據數組設置爲樹視圖根節點。事實是，樹視圖不會呈現數據，除非它以靜態方式顯示，根據需要它不顯示任何內容。下面是代碼：React只渲染一個子組件

constructor (props) { 
    super(props); 
    this.state = { 
     data: [] 
    }; 
    this.tree = { 
     idx: 0, 
     descript: 'Root', 
     collapsible: true, 
     collapsed: false 
    }; 
    } 

    receivingData = (data = []) => { 
    this.setState({data: data}); 
    } 

    componentDidMount() { 
    fetchData(this.receivingData); 
    } 

componentDidUpdate (prevProps, prevState) { 
    if (prevState.data.length !== this.state.data.length) { 
     this.tree.children = []; 
     for (let x of this.state.data) { 
     this.tree.children.push({ 
      idx: x.idx, 
      descript: x.name, 
      collapsible: true, 
      collapsed: false 
     }); 
     } 
    } 
    }

這是渲染方法：

render() { 
    console.log('getting here', this.tree); 
    return (
     <div> 
      <TreeView 
       onNodeSelectionChange={this.onTreeNodeSelection} ref={this.treeViewContainerRefBuilder} 
       data={this.tree} selectLeavesOnly={false} singleSelect/> 
     </div> 
     </div> 
    ); 
    }

控制檯日誌顯示我的樹的變化，但TreeView的呈現一次。我究竟做錯了什麼？

來源

2017-06-02 assembler

我相信你有這裏的問題是，雖然receivingData將導致重新渲染，你在重新渲染已經發生之後發生的componentDidUpdate方法編輯this.tree，讓您的TreeView組件將不會用更新的數據重新呈現。

嘗試使用componentWillUpdate而不是componentDidUpdate，以便this.tree在重新呈現之前被修改。

來源

2017-06-02 12:00:55

謝謝先生CD-jS，我做了你的建議，一切都一樣。我把樹放在狀態中，也沒有發生任何事。 – assembler

React只渲染一個子組件

回答

相關問題