Javascript 类型错误：props.theTodos.map不是函数

我在编译时遇到这个错误：“TypeError:props.theTodos.map不是函数”。我已经有一段时间对这个问题大发雷霆了，但没有一个正确的解决方案，因为我使用的是钩子而不是类组件

它因为“手变”而断裂，但我不明白为什么

App.js

const[todos, setTodos] = useState(todosList);
    const markComplete = (id) => {
     setTodos({ todos: todos.map(todo => {
       if(todo.id === id) {
       todo.status = !todo.status
    }
       return todo;
     }) });
    }
       const handleChange = (id) => {
         markComplete(id);
       }

      return (
        <div className = "App">
         App
         <Todos theTodos = {todos} addTodo = {addTodo} handleChange = {handleChange}/>

        </div>
      );

        const todosList = [
      {
        title: "Dinner",
        id: 1,
        status: false
      },
      {
        title: 'Meeting',
        id: 2,
        status: false,
      },
      {
        title: 'Project',
        id: 3,
        status: false
      }
    ]
    Todos.js

    const Todos = (props) => {
      return (
        props.theTodos.map((todo) => (<TodoItem  key = {todo.id} todo = {todo}  handleChange = {props.handleChange}/>))
      );
    }

    TodoItem.js

    <input type="checkbox"  onChange = {props.handleChange(props.todo.id)}/>

const[todos，setTodos]=useState（todolist）；
常量markComplete=（id）=>{
setTodos（{todos:todos.map（todo=>{
if（todo.id==id）{
todo.status=！todo.status
}
返回待办事项；
}) });
}
常量handleChange=（id）=>{
完成标记（id）；
}
返回(
应用程序
);
常数TodoList=[
{
标题：“晚餐”，
id:1，
状态：false
},
{
标题:"会议",，
id:2，
状态：false，
},
{
标题：“项目”，
id:3，
状态：false
}
]
Todos.js
常量Todos=（道具）=>{
返回(
props.theTodos.map（（todo）=>（））
);
}
TodoItem.js

您的问题是将

todos

设置为对象，而不是数组

const markComplete = (id) => {
 // setting todos as an object
 setTodos({ todos: todos.map(todo => {
   if(todo.id === id) {
   todo.status = !todo.status
}
   return todo;
 }) });
}

你应该把它改成

const markComplete = (id) => {
 // setting todos as an array
 setTodos(todos.map(todo => {
   if(todo.id === id) {
   todo.status = !todo.status
}
   return todo;
 }) );
}

如果您使用

console.log

道具.todos

，则它可能是一个带有键

todo

的对象，该键是

todo

的数组

不要忘记，

useState

的初始值也应该是一个数组

const [todos, setTodos] = useState([])

知道错误

---

为了明确错误的含义，

.map

是一个仅用于数组的函数。如果你得到

foo.map不是一个函数

，这意味着

foo

不是一个数组。

答案很好，因为这一行，我怀疑后面的无限循环出现了一个错误。。。onChange={props.handleChange（props.todo.id）}。（超过最大更新深度）用（）=>props.handleChange（props.todo.id）修复了它

const markComplete = (id) => {
 // setting todos as an object
 setTodos({ todos: todos.map(todo => {
   if(todo.id === id) {
   todo.status = !todo.status
}
   return todo;
 }) });
}