Reactは子コンポーネントを1回だけレンダリングします

Question

私は必要に応じてTreeViewコンポーネントに値を設定しようとしています。私は、componentDidMount関数でデータを取得しているし、それらのデータをメインコンポーネントの状態の配列に挿入します。 componentDidUpdateは、データ配列をツリービューのルートノードに設定するために使用されます。事実、ツリービューは静的な方法でなければデータをレンダリングしません。必要に応じて単純に何も表示されません。ここでは、コードは次のとおりです。

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メソッドです：

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コントロールは一度しかレンダリングされます。私は間違って何をしていますか？

Answer 1

私はあなたが再レンダリング後を発生componentDidUpdate方法でthis.treeを編集している、あなたはここに抱えている問題はしばらくreceivingDataが再描画が発生するということですすでに起こっていると考えているので、あなたのツリービューコンポーネントう更新されたデータで再レンダリングしません。

componentDidUpdateの代わりにcomponentWillUpdateを使用して、再レンダリングが発生する前にthis.treeが変更されるようにしてください。