Question

所以我几乎可以肯定是做错了什么，并且不了解这里的底层库，但是我如何做到这一点，以便可以在外部将行项目更新到React-Data-Grid？

下面的示例，在5s之后，第一行的第一行被更新，但表中的数据没有更新。为什么？以及如何更改？

let cols = [
  {
    key: 'sapAssetNumber',
    name: 'SAP Asset number',
    editable: false
  },
  {
    key: 'assetDescription',
    name: 'Description',
    editable: false
  },
  {
    key: 'assetNBV',
    name: 'Asset NBV',
    editable: false
  },
  {
    key: 'salePrice',
    name: 'Sale price',
    editable: false
  }
];

let rows = [
    {
        "id" : "0",
        "sapAssetNumber" : "woof",
        "isAlreadyDisposed" : "",
        "assetDescription" : "test",
        "assetNBV" : "100",
        "salePrice" : "100"
    },
    {
        "id" : "0",
        "sapAssetNumber" : "",
        "isAlreadyDisposed" : "",
        "assetDescription" : "test",
        "assetNBV" : "100",
        "salePrice" : "100"
    },
    {
        "id" : "this",
        "sapAssetNumber" : "is",
        "isAlreadyDisposed" : "a",
        "assetDescription" : "test",
        "assetNBV" : "",
        "salePrice" : ""
    },
    {
        "id" : "jfkhkdafhn",
        "sapAssetNumber" : "",
        "isAlreadyDisposed" : "",
        "assetDescription" : "",
        "assetNBV" : "",
        "salePrice" : ""
    },
    {
        "id" : "kjdsaflkadjsf",
        "sapAssetNumber" : "",
        "isAlreadyDisposed" : "",
        "assetDescription" : "",
        "assetNBV" : "",
        "salePrice" : ""
    },
    {
        "id" : "",
        "sapAssetNumber" : "",
        "isAlreadyDisposed" : "",
        "assetDescription" : "",
        "assetNBV" : "500",
        "salePrice" : "500"
    }
];

class Example extends React.Component {
  constructor() {
  	super();
		
    setTimeout(() => {
    	console.log('changed');
      rows[0].sapAssetNumber = 'meow'
    }, 5000);
  }
  
	render() {
  	return <ReactDataGrid
        columns={cols}
        rowGetter={(i) => rows[i]}
        rowsCount={10}
      />;
  }
}

ReactDOM.render(<Example />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-data-grid/6.1.0/react-data-grid.min.js"></script>

<div id="app"></div>

Answer 1

rows变量是文件中的全局变量。 5秒钟后，行变量已更改，但是由于示例成员状态既不维护行变量也不是示例组件的支持，因此示例组件生命周期方法不会跟踪该更改。因此，当行变量更改且因此ReactDataGrid无法获取更新的值时，将不会调用Example组件的render方法。

尝试将row变量保持在Example组件的状态。像这样-

let cols = [
    {
      key: 'sapAssetNumber',
      name: 'SAP Asset number',
      editable: false
    },
    {
      key: 'assetDescription',
      name: 'Description',
      editable: false
    },
    {
      key: 'assetNBV',
      name: 'Asset NBV',
      editable: false
    },
    {
      key: 'salePrice',
      name: 'Sale price',
      editable: false
    }
  ];

  let rows = [
      {
          "id" : "0",
          "sapAssetNumber" : "woof",
          "isAlreadyDisposed" : "",
          "assetDescription" : "test",
          "assetNBV" : "100",
          "salePrice" : "100"
      },
      {
          "id" : "0",
          "sapAssetNumber" : "",
          "isAlreadyDisposed" : "",
          "assetDescription" : "test",
          "assetNBV" : "100",
          "salePrice" : "100"
      },
      {
          "id" : "this",
          "sapAssetNumber" : "is",
          "isAlreadyDisposed" : "a",
          "assetDescription" : "test",
          "assetNBV" : "",
          "salePrice" : ""
      },
      {
          "id" : "jfkhkdafhn",
          "sapAssetNumber" : "",
          "isAlreadyDisposed" : "",
          "assetDescription" : "",
          "assetNBV" : "",
          "salePrice" : ""
      },
      {
          "id" : "kjdsaflkadjsf",
          "sapAssetNumber" : "",
          "isAlreadyDisposed" : "",
          "assetDescription" : "",
          "assetNBV" : "",
          "salePrice" : ""
      },
      {
          "id" : "",
          "sapAssetNumber" : "",
          "isAlreadyDisposed" : "",
          "assetDescription" : "",
          "assetNBV" : "500",
          "salePrice" : "500"
      }
  ];

  class Example extends React.Component {
    constructor() {
        super();

        this.state={rows:rows}


    }

    componentDidMount = () =>{
        const context =  this;
        setTimeout(() => {
            rows[0].sapAssetNumber = 'meow'
            context.setState({rows});
      }, 5000);
    }

      render() {
        return <ReactDataGrid
          columns={cols}
          rowGetter={(i) => rows[i]}
          rowsCount={10}
        />;
    }
  }

  ReactDOM.render(<Example />, document.querySelector("#app"));

请仔细阅读以了解组件状态：-https://reactjs.org/docs/faq-state.html

请阅读以下内容，以查看何时称为以下方法的渲染方法：-https://lucybain.com/blog/2017/react-js-when-to-rerender/

希望它可以解决问题！

Answer 2

在通过GitHub咨询react-data-grid中的问题之后，我使用了那里提供的解决方案。

然后只需呼叫this.refresh()。它不漂亮，但似乎是RDG中的一个漏洞

getRowCount() {
    let count = this.props.rows.length;
    if(this.state.refresh && count > 0) {
      count--; // hack for update data-grid
      this.setState({
        refresh: false
      });
    }

    return count;
  }

refresh() {
    this.setState({
      refresh: true
    });
  }

React Data Grid外部数据更新

2 个答案: