所以我几乎可以肯定做错了什么,并且不理解这里的底层库,但我该如何做到这一点,以便我可以将行项目从外部更新到 React-Data-Grid?
下面的例子,5s后第一行的第一个col被更新,但表中的数据没有。为什么?以及如何改变?
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>