React TypeError：lists.map 不是函数

Question

TypeError：lists.map 不是函数

1.我正在使用 React 制作 TodoList。在您添加列表之前，它一直有效， 按钮时添加删除功能时出错 点击了

2.使用useContext将列表与其他文件分开会不会有问题？

对于这个问题的尴尬，我深表歉意。 感谢您帮助解决此问题。

• TodoList.jsx

    import React, { useContext} from 'react';
    import Todo from './Todo';
    import { ListContext } from './ListContext';



    const TodoList = () => {
        const [lists, setLists] = useContext(ListContext);

        return (
            <div>
                {lists.map((list, index) => {
                    return <Todo list={list.todos} key={index}/>
                })}
            </div>
        );
    }

    export default TodoList;

• Btn.jsx

import React, {useContext} from 'react';
import { ListContext } from './ListContext';

const Btn = (id) => {

    const [lists, setLists] = useContext(ListContext);

    const onRemove = (id) => {
        setLists({
            lists: lists.filter(list => list.id !== id)
        });
    }

    return(
        <>
        <button onClick={(e) => {
            e.stopPropagation();
            onRemove(id);
        }}>x</button>
        </>
    );  `enter code here`
}

export default Btn;

• ListContext.jsx

import React, {useState, createContext,} from 'react';

export const ListContext = createContext();

export const ListProvider = (props) => {

    const [lists, setLists] = useState([
        {
            todos: 'Make a TodoList',
            id: 1,
        },
    ]);

    return(
        <ListContext.Provider value={[lists, setLists]}>
            {props.children}
        </ListContext.Provider>
    );   
}

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((list, index) => { 13 |返回 14 | })}

Answer 1

你的问题就在这里，你只从lists传递todos而不是id

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

在Todo 组件中，您尝试访问list.id，即undefined，因为您还没有从TodoList 组件传递它。

在TodoList组件中，不需要传递list.todos，只需要传递list就好，

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

您的Todo 组件应该是，

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

另外一个问题是在Btn 组件定义中，

const Btn = (id) => { ... 

你需要这样做，

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