React跨组件更新时Material-UI DataGrid不刷新问题

问题原因 #

UploadButton组件初始化时通过闭包捕获了rows的初始值（空数组），当通过UI添加新行后，组件未更新对rows的引用。上传完成执行setRows(rows.map(...))时，使用的仍是旧的rows数组（不包含新添加的行），导致新行的document字段无法被更新，因此表格UI无变化。而未拆分组件时，所有逻辑处于同一作用域，rows始终是最新状态，所以功能正常。

修复方案 #

修改Upload_Button.js中的setRows调用，使用函数式更新获取最新的rows状态，而非依赖闭包中的旧值：

// 替换原setRows行
setRows(prevRows => prevRows.map((row) => (row.id === params.id ? {...row, document: fileUrl} : row)));

完整修改后的handleChange函数 #

function handleChange(event) {
    setLoading(true)
    const request = new XMLHttpRequest();
    const url = process.env.REACT_APP_SERVER_HOST + USER_GOOGLE_TOKEN_URI
    request.open("GET", url, false); // `false` makes the request synchronous
    request.withCredentials = true;
    request.send();
    const res = JSON.parse(request.responseText)
    const file = event.target.files[0]
    const formData = new FormData();
    const metadata = {
        name: userEmail + "_" + Date.now() + "_" + file.name,
        mimeType: file.type,
        parents: [EXPENSES_FOLDER_ID],
        response: 'file.id'
    }
    formData.append('metadata', new Blob([JSON.stringify(metadata)], {
        type: "application/json"
    }))
    formData.append("file", file)

    fetch(GOOGLE_DRIVE_UPLOAD_FILE_URI, {
        method: 'POST',
        headers: new Headers({ 'Authorization': 'Bearer ' + res.accessToken }),
        body: formData
    }).then((res) => {
        return res.json();
    }).then(function (val) {
        const fileUrl = DRIVE_FILE_URI + val.id
        console.log("Params")
        console.log(params)
        setRowModesModel((oldModel) => ({
            ...oldModel,
            [params.id]: { mode: GridRowModes.Edit, fieldToFocus: 'document' },
        }));
        // 使用函数式更新获取最新rows
        setRows(prevRows => prevRows.map((row) => (row.id === params.id ? {...row, document: fileUrl} : row)));
        setLoading(false);
    });
}

额外优化建议 #

• 替换同步XMLHttpRequest为异步方式（配合async/await），避免阻塞页面主线程，提升响应性。
• 增加上传过程的错误捕获逻辑，避免因网络或API异常导致Loading状态无法关闭。

内容的提问来源于stack exchange，提问作者Anmol Garg