Question

我正在尝试按需填充TreeView组件。我在componentDidMount函数中获取数据，然后将这些数据插入主组件状态的数组中。 componentDidUpdate用于将数据数组设置为treeview根节点。事实是，树视图不会呈现数据，除非它以静态方式呈现，根据需要它不会显示任何内容。这是代码：

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只呈现一次。我做错了什么？

Answer 1

我相信您在此处遇到的问题是，receivingData会导致重新呈现，您正在this.tree方法中编辑componentDidUpdate，该方法在之后 / em>重新渲染已经发生，因此您的TreeView组件不会使用更新的数据重新渲染。

尝试使用componentWillUpdate代替componentDidUpdate，以便在重新呈现之前修改this.tree。

Answer 2

这应该可以解决您的问题：

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

receivingData = (data = []) => {
if (prevState.data.length !== 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
      });
    }
  }
this.setState({data: data});
}

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

componentDidUpdate (prevProps, prevState) {

}

注意：不要使用componentWillUpdate，因为这些方法被认为是旧方法，因此应在新代码中避免使用它们。请参阅https://reactjs.org/docs/react-component.html

希望这会有所帮助：）

React只渲染一个子组件一次

2 个答案: