Javascript 在React中重新加载页面时无法处理复选框的状态

我正在尝试使用React和Material UI制作一个待办事项列表应用程序。除复选框状态外，一切正常。我将每个todo保存为本地存储中todo列表数组中的对象，如下所示

• todoList是我存储每个todo的状态
• isCompleted也是一个默认布尔值为false的状态

在另一个组件中，我通过useEffect从本地存储中获取保存的项目，并将它们呈现为待办事项列表。每次完成更改时，我都会尝试获取存储的项目

 useEffect(() => {
        let savedItem = JSON.parse(localStorage.getItem('todos'))
        if (savedItem !== null) {
            setTodoList(savedItem);
        }
    }, [isCompleted])

• 这是应更改读取状态的复选框

• 请注意，我正在映射itemsToRender数组以在组件中显示TODO

如何防止复选框自行重置（未选中），我需要复选框在重新加载页面后保持选中状态

对我来说，我用useEffect或MUI复选框组件做了一些错误的事情

---

提前感谢您的帮助或建议。

您需要通过在复选框上指定value属性，使其成为受控输入。并将value属性设置为等于

todo.status

todoList.map(todo => 
    (<FormControlLabel
        control={
            <Checkbox
               onChange={(e) => changeStatus(e.target.checked,index)}
               color="primary"
               value={todo.status}
            />
        }
    />)
)

todoList.map（todo=>
(
}
/>)
)

  <FormControlLabel
       control={
       <Checkbox
       onChange={(e) => changeStatus(e.target.checked,index)}
       color="primary"
        />
       }
  />

 const changeStatus = (val,num) => {

        let item = todoList[num];
        if(val === false){
            setIsCompleted(true);
            item.status = isCompleted;

        }else if(val === true){
            setIsCompleted(false);
            item.status = isCompleted;
        }
        
        let storedItems = [...todoList];
        itemsToRender = storedItems;
        storedItems = storedItems.map(todo => todo.id === item.id ? todo = item : todo)
        console.log('STORED',storedItems);
        localStorage.setItem('todos', JSON.stringify(storedItems));
    }

todoList.map(todo => 
    (<FormControlLabel
        control={
            <Checkbox
               onChange={(e) => changeStatus(e.target.checked,index)}
               color="primary"
               value={todo.status}
            />
        }
    />)
)