我是 React 的新手，正在使用它制作一个待办事项应用程序。为了列出用户输入的待办事项，我尝试使用地图浏览所有待办事项，并添加了一项功能，以便能够删除任何待办事项。

这是我的 Todos.js ：

import React, {useContext} from 'react';
import {ListGroup, ListGroupItem} from 'reactstrap';
import {FaCheckDouble} from 'react-icons/fa';
import { TodoContext } from '../Context/TodoContext';
import { REMOVE_TODO } from '../Context/action.types';


const Todos = () => {
    const {todos, dispatch} = useContext(TodoContext);

    return(
        <ListGroup className="mt-5 mb-2 items">
            {todos.map(todo => (
                <ListGroupItem key={todo.id}> 
                    {todo.todoString}
                    <span 
                    className="float-right"
                    onClick={() => {
                        dispatch({
                            type: REMOVE_TODO,
                            payload: todo.id
                        })
                    }}
                    ><FaCheckDouble/></span>
                </ListGroupItem>
            ))}
        </ListGroup>
    )
}

export default Todos;

这是我的 App.js （将 todo 更新为 todos ）

import React, {useReducer} from 'react';
import Container from "reactstrap/lib/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

import {TodoContext} from './Context/TodoContext';
import todoReducer from "./Context/reducer";
import TodoForm from './Component/TodoForm';
import Todos from './Component/Todos';

const App = () => {
  const [todos, dispatch] = useReducer(todoReducer, [])
  return(
    <TodoContext.Provider value={{todos, dispatch}}>
      <Container fluid>
        <h1>
          Todo App with Context API
        </h1>
        <Todos/>
        <TodoForm/>
      </Container>
    </TodoContext.Provider>
  )
}

export default App;

浏览器向我抛出了错误： TypeError：无法读取未定义的属性“map”