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

Question

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

• todoList 是我存储每个待办事项的状态。
• isCompleted 也是一个默认布尔值为 false 的状态

 let arr = todoList;
 const newTodo = new TodoItem({
                id: randomID,
                text: text,
                date: date,
                status: isCompleted
            });

 setTodoList([newTodo, ...arr]);
            localStorage.setItem('todos', JSON.stringify(todoList));

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

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

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

  <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));
    }

• 请注意，我正在映射 itemsToRender 数组以在组件中显示待办事项。

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

对我来说，我在 useEffect 或 MUI 复选框组件上做错了。

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

标签： javascriptreactjsmaterial-uilocal-storageuse-effect

Answer 1

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

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