反应 | DataGrid 不更新 State

Question

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

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

变异 State

您没有得到正确更新的原因是您在调用obj.push时在此处对 state 进行了变异：

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 是一种“按引用传递”语言（ 主要是），因此obj是一个新变量，它存储与 this.state.linkData 相同的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]
    }));
}