第三方子组件不会在 ReactJS 中从父级的道具更改时更改

Question

我正在使用第三方组件来呈现树表及其正常流程，父组件通过传递所需的 Props 调用子组件。

道具： 1. 树（包含要呈现为树的实际数据） 2.排序顺序

import React, { Component } from 'react';
import TreeDataTable from 'cp-react-tree-table';

    class TreeView extends Component {
        static propTypes = {
          tree: PropTypes.array,
          sortOrd:PropTypes.any
        };

        static defaultProps = {
            tree: [],
            height: 0
        };

        constructor(props) {
          super(props);
          this.table = React.createRef();
          this.state = {
            sortOrder: ''
          };
        }

        componentDidMount() {
            this.props.tableRef(this.table);
        }
        componentWillReceiveProps({sortOrd}){
            this.setState({sortOrder:sortOrd});
        }

        render() {
          const { tree } = this.props;
          return (
            <div className="treeview">
            // data attribute passes the data to form tree
              <TreeDataTable ref={this.table} data={tree} className="treeview-body">
                <TreeDataTable.Column basis="80%" renderCell={this.renderIndexColumn} />
              </TreeDataTable>
            </div>
          );
        }

我正在尝试根据父组件中的按钮单击（随之而来的状态更改）重新排序树表。

什么有效： 1.父组件的状态变化 2.父组件重新渲染 3. 使用更新的 props ( data, sortOrder ) 调用子组件

4. 子组件被调用
5. 子组件状态根据更新后的 props 更改
6. 子组件重新渲染

问题： 子组件使用旧道具（数据）重新渲染

预期结果： 使用更新的道具（数据）重新渲染的子组件

作为一个普通的子组件，这应该可以工作，但由于我使用的是第三方组件，我怀疑是否缺少一些东西来使它与更新的数据一起重新渲染。

有没有办法，我可以让这个子组件使用更新后的道具（数据）重新渲染并显示更新后的树。

Answer 1

componentWillReceiveProps 为您提供 nextProps，但您将其作为对象获取

改变

     componentWillReceiveProps({sortOrd}){
           this.setState({sortOrder:sortOrd});
     }

到

     componentWillReceiveProps(nextProps){
           if(nextProps.sortOrd != this.props.sortOrd){          
                  this.setState({sortOrder:sortOrd});

            }
       }

但请记住，componentWillReceiveProps 生命周期方法已被弃用，因此替代生命周期方法是

     static getDerivedStateFromProps(nextProps, prevState) {
          if(nextProps.sortOrd != this.props.sortOrd){
                 return {
                      sortOrder : nextProps.sortOrd //this is equivalent to setState
                 };
            }else{
                 return null;
            }
        }

Answer 2

问题出在componentWillReceiveProps中，componentWillReceiveProps中的setState会导致状态更新，但不会调用render。也许你可以像下面这样设置sortOrder，然后先传null。

constructor(props) {
      ...
      this.state = {
        sortOrder: props.sortOrd
      };
    }

然后，父组件中的props改变后，tree-table会重新渲染。