Reactjs 是否在物料界面中更新列表项？

我在react中有一个项目，我正在构建一个简单的todo应用程序。单击列表中的项目时，我想更新该值。我的代码如下所示：

export default function ShowTodos () {

  const [todos, setTodos] = React.useState<ITodo[]>([]);

  const [selectedTodo, setSelectedTodo] = React.useState<ITodo>({});

  const [dialogState, setDialogState] = React.useState<boolean>(false);

  const confirm = useConfirm();



  useEffect(() => {

      getTodos()
      .then(({data: {todos}}: ITodo[] | any) => {
        const todoList = todos
       setTodos(todoList)
      })
      .catch((err: Error) => console.log(err))


  })


  const handleConfirmation = (id: string) => {

    confirm({ description: 'This action is permanent!' })
    .then(() => { deleteTodoById(id).then(r => )})
  }



  return (
      <List>
        {todos.map((todo: ITodo ) =>
            (
              <ListItem onClick={() => {
                console.log("hh", todo);
                setDialogState(!dialogState)
              }
              } key={todo._id}>
                <ListItemText
                    primary={todo.text}
                />
                  <IconButton edge="end" aria-label="delete" onClick={() => handleConfirmation(todo._id)}>
                    <DeleteIcon />
                  </IconButton>

            <Dialog open={dialogState} aria-labelledby="form-dialog-title">
              <DialogTitle id="form-dialog-title">Update</DialogTitle>
              <DialogContent>
                <TextField
                    defaultValue={todo.text}
                    autoFocus
                    margin="dense"
                    id="name"
                    fullWidth
                />
              </DialogContent>
              <DialogActions>
                <Button color="primary" onClick={() => setDialogState(false)}>
                  Cancel
                </Button>
                <Button  color="primary" onClick={() => updateTodo(selectedTodo)}>
                  Update
                </Button>
              </DialogActions>
            </Dialog>
              </ListItem>
            )
        )}
      </List>
  );

}

导出默认函数ShowTodos（）{
const[todos，setTodos]=React.useState（[]）；
const[selectedTodo，setSelectedTodo]=React.useState（{}）；
const[dialogState，setDialogState]=React.useState（false）；
const confirm=useConfirm（）；
useffect（（）=>{
getTodos（）
。然后（{data:{todos}}：ITodo[]| any）=>{
常数todoList=todos
setTodos（todoList）
})
.catch（（err:Error）=>console.log（err））
})
常量handleConfirmation=（id:string）=>{
确认（{description:'此操作是永久的！'}）
.then（（）=>{deleteTodoById（id）.then（r=>）}）
}
返回(
{todos.map（（todo:ITodo）=>
(
{
console.log（“hh”，todo）；
setDialogState（！dialogState）
}
}key={todo.\u id}>
handleConfirmation（todo.\U id）}>
更新
setDialogState（false）}>
取消
updateTodo（selectedTodo）}>
更新
)
)}
);
}

然而，奇怪的是，单击项目时的默认值始终是列表中的最后一项。如何将其更改为所单击项目的文本

---

谢谢

您需要将每个待办事项的单独状态添加到新组件中

这段代码中的主要问题是：

<ListItem onClick={() => {
            console.log("hh", todo);
            setDialogState(!dialogState)
          }
          } key={todo._id}>

我想你应该定义

updateTodo

onClick={() => {
            console.log("hh", todo);
            setSelectedTodo(todo);
            setDialogState(!dialogState);
          }