如何為待辦事項列表中使用的復選框布爾值創建狀態，可以讓用戶添加/刪除項目？

Question

我為我的網站創建了一個待辦事項列表，用戶可以在其中添加和刪除待辦事項，我正在嘗試制作它，以便他們可以根據需要檢查或取消選中這些項目。

現在添加/刪除的功能工作正常，當它們被點擊時復選框會更新數據庫，但問題是復選框沒有在網站上正確更新。

state 是數據庫中的待辦事項信息數組。 所以最初 state 被設置為數據庫中的當前信息：

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
.
.
.
```

現在，一旦將其設置為 state I map ，待辦事項就會變成一個表格：

<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>

然后，當檢查復選框時，我更改state並更新數據庫，以反映所有復選框的新表示形式

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...
}

我認為這會在每次更新此 state 時自動更新網站上的復選框，但是當項目 state 更改時，它不會重新映射表單中的待辦事項。

Answer 1

var updated_todo = items

是對 object 的引用，因此當您更改它時，您還會更改 state，這就是為什么在設置 state 時應用程序不會重新呈現的原因

嘗試改變它

var updated_todo = [...items]