如何为用户可以包含项目 added/deleted 的待办事项列表中使用的复选框布尔值创建状态？

Question

我已经为我的网站创建了一个待办事项列表，用户可以在其中添加和删除待办事项，我正在努力做到这一点，以便他们可以根据需要选中或取消选中这些项目。

现在 add/delete 的功能运行良好，复选框在被点击时更新数据库，但问题是复选框在网站上没有正确更新。

状态是数据库中待办事项信息的数组。所以最初状态被设置为来自数据库的当前信息：

const [items, setItems] = useState(todo_items)

其中 todo_items 来自数据库，结构如下：

```
0: 
 complete: 0 or a 1
 todo_id: Integer
 todo_item: String
1: 
 complete: 0 or a 1
 todo_id: Integer
 todo_item: String
.
.
.
```

现在，将其设置为状态后，我将待办事项映射到表单：

<form>
     {items.map((e) => (
        <div id={e.todo_id}>
            <div>
               <input
                  type="checkbox"
                  checked={e.complete === 1}
                  onChange={(f) => checkHandler(f.target.checked, e.todo_id)}
               />
               <p>{e.todo_item}</p>
            </div>
         </div>
      ))}
</form>

然后当复选框被选中时，我更改状态并更新数据库以反映所有复选框的新表示

async function checkHandler(checked, todo_id){
    var updated_todo = items

    for (var i = 0 ; i < items.length ; i++){
        if (items[i].todo_id === todo_id && checked === true) {
            updated_todo[i].complete = 1;
        } else if (items[i].todo_id === todo_id && checked === false){
            updated_todo[i].complete = 0;
        }
    }
        
    setItems(updated_todo)
    
    // update database below...
}

我认为每次更新此状态时都会自动更新网站上的复选框，但当项目状态更改时它不会重新映射表单中的待办事项。

Answer 1

var updated_todo = items

是对该对象的引用，因此当您更改它时您也会更改状态，这就是为什么当您设置状态时应用程序不会重新呈现

也尝试改变它

var updated_todo = [...items]

如何为用户可以包含项目 added/deleted 的待办事项列表中使用的复选框布尔值创建状态？

How can I create states for checkbox Booleans used in a todo list that can have items added/deleted by the user?

javascript

checkbox

reactjs