为什么TODO列表在reactjs中不能正常工作

Question

import React from 'react'
const Todo = () => {
const[newitem,setNewitem]=React.useState("");
const [list,setList]=React.useState([]);
function addItem(todovalue)
{
if(todovalue!=="")
{
const newItem={
id:1 + Math.random(),
value:todovalue,
isDone:false
}
const list=[...list];
list.push(newItem);
setNewitem({list,newItem:""});
}
}
function deleteItem(id)
{
const list=[...list];
const updatedlist=list.filter(item=>item.id!==id);
setNewitem({updatedlist});
}
function update(input)
{
setNewitem({newItem:input});
}
return (
<div className="container">

<h1>Add an item...</h1>
<input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/>
<button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button>
<div className="list">
<ul>
{
list.map(item=>{
return(
<li key={item.id}>
<input type="checkbox" checked={item.isDone} onChange={()=>{}}/>
{item.value}
<button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button>
</li>
)
})
}
</ul>
</div>

</div>
)
}

导出默认Todo当我们要在文本字段中写入一些文本时，它只会得到[object object]，而当我们单击AddTodo按钮时，它会抛出错误"；初始化前无法访问"列表"；如何解决这个

Answer 1

这里有一个工作版本(我也实现了复选框功能(：

请注意，我已经删除了您的id生成。1 + Math.random()将返回一个介于1和2之间的id。它会在列表中创建一个错误(每个项目都需要一个唯一的键(，并且在删除项目或选中isDone复选框时也会创建冲突。

import React from 'react'
function Todo () {
const [newitem, setNewitem] = React.useState("");
const [list, setList] = React.useState([]);
const addItem = (value) => {
const newItem={ id: list.length +1, value, isDone:false }
setNewitem("")
setList(prev=> ([...prev, newItem]));
}
const deleteItem = (id) => {
const updatedlist= [...list].filter(item => item.id !== id);
setList(updatedlist);
}
const onCheck = (id) => {
const updatedList = [...list].map(todo=> {
if(todo.id === id){
return {...todo, isDone: !todo.isDone}
}
return todo
})
setList(updatedList)
}

return (
<div className="container">
<h1>Add an item...</h1>
<input type="text" placeholder="add item" required  value={newitem} onChange={e=> setNewitem(e.target.value)}/>
<button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={!newitem}>Add Todo</button>
<div className="list">
<ul>
{list.map(item=>(
<li key={item.id}>
<input type="checkbox" checked={item.isDone} onChange={()=> onCheck(item.id)}/>
{item.value}
<button className="btn" onClick={()=> deleteItem(item.id) }>Delete</button>
</li>
))
}
</ul>
</div>

</div>
)
}
export default function App(){
return <Todo/>
}