反应 | DataGrid 不会随着状态的改变而更新

Question

我目前正在使用 MaterialUI 中的 Datagrid 组件开发链接树。可以显示数据，但是当我尝试添加新条目时，出现内容保持不变的问题。状态发生变化，但没有呈现新数据。

const columns = [
{field: 'date', headerName: 'Date', width: 120},
{
    field: 'videoUrl',
    headerName: 'Video URL',
    width: 430,
    renderCell: (params) =>
            <a href={(params.value)}>{params.value}</a>
},
{field: 'description', headerName: 'Description', width: 130},
];


class Linktree extends React.Component {
    this.state = {
        newLink: "",
        newDescription: "",
    }
}

handleAddNewLink(newLink, description) {
    let obj = this.state.linksData
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    obj.push(newEntry)

    this.setState({linksData: obj})
}

render (){
    return (
        <div>
            <div style={{height: 400, width: '100%', backgroundColor: "white"}}>
                <DataGrid rows={!this.state.loading ? this.state.linksData : []} columns={columns} pageSize={5} hideFooterSelectedRowCount/>
            </div>
        </div>
    );
}}

Answer 1

变异状态

你没有得到正确更新的原因是你在调用 obj.push 时改变了你的状态：

handleAddNewLink(newLink, description) {
    let obj = this.state.linksData
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    obj.push(newEntry)
    this.setState({linksData: obj})
}

Javascript 是一种“按引用传递”的语言 (mostly)，因此 obj 是一个新变量，它存储对相同 array 对象的相同引用作为 this.state.linksData。所以你不能在 obj.

上调用变异方法

解决方案

通过复制旧数组的内容将 linksData 设置为新数组。

handleAddNewLink(newLink, description) {
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    this.setState(prevState => ({
      linksData: [...prevState.linksData, newEntry]
    }));
}

反应 | DataGrid 不会随着状态的改变而更新

React | DataGrid does not update with changed State

javascript

state

rendering

reactjs

material-ui

变异状态

解决方案