更改现有对象的状态

Question

您好，我正在使用React上下文，但是遇到了问题。

我具有包含所有逻辑的组件：

import React , {useContext} from 'react';
import {TodoContext} from '../../contexts/todo-context';
import Todo from './Todo'; 
import './Todos.css';

export default function TodoList() {
    const [todos , setTodos] = useContext(TodoContext);

    const markComplete = (e) => {
       setTodos(prevState => [...prevState , {...e.target.value , done:true} ]); 
       console.log(todos);
    }


    return (
        <div className="TodoContainer">
            {todos.map(todo => (<Todo key={todo.id} todo={todo} markComplete={markComplete} /> ))}
        </div>
    )
}

我正在传递一个markComplete函数，该函数将在Todo组件中使用。

Todo组件：

从'反应'导入React'

export default function Todo({todo , markComplete}) {
    return (
        <div>
            <input type="checkbox" value={todo} onChange={markComplete}></input>
            <li>{todo.title}</li>
            <div className="spacer"></div>
        </div>
    )
}

[这里有一个复选框，其中onChange应该会触发我的markComplete函数。这可以工作，但是markComplete函数由于某种原因不会更改我的状态。这又是函数：

const markComplete = (e) => {
   setTodos(prevState => [...prevState , {...e.target.value , done:true} ]); 
   console.log(todos);
}

它还会产生一个错误，说我应该将密钥传递给我（我已经在这样做了]

状态：

const [todo, setTodo] = useState([
    {
        title : 'Do the dishes', 
        done : false , 
        id: 123 
    },
    {
        title : 'wash car', 
        done : false , 
        id: 423 
    },
    {
        title : 'Buy pen', 
        done : false , 
        id: 323 
    }
]);