React MUI Checkbox值为false时页面刷新仍被选中问题求助

核心问题定位 #

首先看前后端数据字段不匹配的关键问题：

• 后端Django视图中，GET/POST请求返回的字段是submitted（示例：{"submitted": current_client.all_submitted}）
• 前端代码里，useEffect和handleChange中都用了response.data.allEvidenceSubmitted，这和后端返回的字段名完全不一致！
• 这种不匹配会导致前端无法正确获取后端返回的布尔值，setChecked拿到的是undefined，而React中Checkbox的checked属性如果是undefined，会被视为选中状态，这就是你看到的异常现象。

分步解决建议 #

1. 修正前后端字段名匹配 #

把前端所有获取后端返回值的地方，从response.data.allEvidenceSubmitted改成response.data.submitted：

const handleChange = (event) => {
    api.post("/client/files", {checked: event.target.checked}).then((response) => {
        if (response.status === 200) {
            setChecked(response.data.submitted); // 修正字段名
        }
    })
};

useEffect(() => {
    api.get("/client/files").then((response) => {
        if (response.status === 200) {
            setChecked(response.data.submitted); // 修正字段名
        }
    });
}, []) // 修正依赖数组，见下文

2. 修正useEffect的依赖数组 #

你当前的useEffect依赖写了["checked"]，这会导致每次checked状态变化时都重新发起GET请求，形成不必要的循环。页面初始加载时只需要获取一次后端数据，所以把依赖数组改成空数组[]即可。

3. 增加API请求错误处理（可选但推荐） #

在请求中添加catch逻辑，避免请求失败时状态异常：

useEffect(() => {
    api.get("/client/files")
        .then((response) => {
            if (response.status === 200) {
                setChecked(response.data.submitted);
            }
        })
        .catch(error => {
            console.error("获取提交状态失败:", error);
            // 请求失败时可设置默认状态
            setChecked(false);
        });
}, [])

const handleChange = (event) => {
    api.post("/client/files", {checked: event.target.checked})
        .then((response) => {
            if (response.status === 200) {
                setChecked(response.data.submitted);
            }
        })
        .catch(error => {
            console.error("更新提交状态失败:", error);
            // 请求失败时回滚Checkbox状态
            setChecked(!event.target.checked);
        })
};

4. 验证后端接口返回值 #

打开浏览器控制台的Network标签，查看页面刷新时GET请求的响应数据，确认返回的是{"submitted": false}，确保后端逻辑正确返回预期值。

5. 确认Checkbox受控状态有效性 #

确保checked状态始终由React状态控制，你的代码中已经设置了checked={checked}，这部分是正确的，但要保证setChecked始终接收正确的布尔值（而非undefined或其他类型）。

内容的提问来源于stack exchange，提问作者michal.kyjovsky