Javascript 反应类型错误：lists.map不是函数 TypeError:lists.map不是函数

1.我用React来做TodoList。直到你添加一个列表， 单击按钮时添加删除功能时出错 点击

2.使用useContext将列表与其他文件分开是否有问题

我为这个问题的尴尬感到抱歉。 谢谢你帮我解决这个问题

• TodoList.jsx

从“React”导入React，{useContext}；
从“/Todo”导入Todo；
从“./ListContext”导入{ListContext}；
const topolist=（）=>{
const[lists，setLists]=useContext（ListContext）；
返回(
{lists.map（（列表，索引）=>{
返回
})}
);
}
将默认值导出到列表；

• Btn.jsx

从“React”导入React，{useContext}；
从“./ListContext”导入{ListContext}；
常数Btn=（id）=>{
const[lists，setLists]=useContext（ListContext）；
const onRemove=（id）=>{
集合列表({
lists:lists.filter（list=>list.id！==id）
});
}
返回(
{
e、 停止传播（）；
onRemove（id）；
}}>x
);  `在这里输入代码`
}
导出默认Btn；

• ListContext.jsx

import React，{useState，createContext，}来自“React”；
export const ListContext=createContext（）；
导出常量列表提供程序=（道具）=>{
const[lists，setLists]=useState([
{
待办事项：“做一个待办事项专家”，
id:1，
},
]);
返回(
{props.children}
);   
}

TypeError:lists.map不是函数 任务列表 C:/Users/user/Desktop/Work/VSC workspace/React/todolist/src/component/todolist.jsx:11 8 | const[lists，setLists]=useContext（ListContext）； 9 | 10 |返回(

11 | `在此处输入代码 |^12{lists.map（（列表，索引）=>{ 13 |返回 14 |}

---

您的问题就在这里，您只传递来自

列表的
todo
，而不是
id

<Todo list={list.todos} key={index}/>

您的
Todo
组件应该是

const Todo = ({list}) => { 
   return( 
      <div className="todolist"> 
        <li>
         {list.todos}
         <Btn id={list.id}/>
        </li> 
      </div> 
   ); 
}

你需要这样做

const Btn = ({id}) => { ... //notice the curly braces as you did in `Todo` component

注意：您仍然面临任何问题

lists.filter(list => list.id !== id)

你可以这样做

lists.filter(list => Number(list.id) !== Number(id)) //possibility that `id` props might come as `string` type

您的问题就在这里，您只传递来自
列表的
todo
，而不是
id

<Todo list={list.todos} key={index}/>

您的
Todo
组件应该是

const Todo = ({list}) => { 
   return( 
      <div className="todolist"> 
        <li>
         {list.todos}
         <Btn id={list.id}/>
        </li> 
      </div> 
   ); 
}

你需要这样做

const Btn = ({id}) => { ... //notice the curly braces as you did in `Todo` component

注意：您仍然面临任何问题

lists.filter(list => list.id !== id)

你可以这样做

lists.filter(list => Number(list.id) !== Number(id)) //possibility that `id` props might come as `string` type

在
onRemove
中，它应该是
setlist（list.filter（list=>list.id！==id））
所以我对如何反应有点陌生，但是当你用use创建列表时，你说列表应该是一个带有
todos
和
id
的对象数组。所以当你使用
setlist
并用
传递对象时{lists:lists.filter}..
我认为为一个键提供列表的对象应该是期望
todos
和
id
的对象，因此您不能这样设置属性列表。您可以
设置列表（lists.filter（list=>list.id！==id））
但也不确定
列表
在哪里输入数据创建一个问题示例。如何添加
Btn
组件，也发布该组件。在
onRemove
中，应该是
setlist（list.filter（list=>list.id！==id））
所以我对反应有点陌生，但是当你用use创建列表时，你说列表应该是一个带有
todos
和
id
的对象数组。所以当你使用
setLists
并用
{lists:lists.filter}传递对象时..
我认为，您为一个键提供列表的对象应该是期望
todos
和
id
的对象，因此您不能这样设置属性列表。您可以
设置列表（list.filter（list=>list.id！==id））
但也不确定
列表的位置
提供了一个问题示例。如何添加
Btn
组件，也请发布。感谢您的友好回复，问题已经解决。我将学到很多。：）@ravibagul91多亏了你的好意回复，问题已经解决了。我将学到很多。：@ravibagul91