Question

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

这是我的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”

Answer 1

请确保todos是一个数组且未定义。 undefined.map()显然没有意义。因此，请确保已正确导入该文件，并且您实际上可以像todos && todos.map()一样进行操作。

Answer 2

这是React的一个非常普遍的问题。 Todos值最初是不确定的，您正在尝试渲染它。您可以使用useEffect()检查其值。

您应该执行以下操作：

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

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

您基本上要说的是：如果todos具有某些价值，则渲染todos.map，否则，什么也不渲染。

希望这对您有所帮助。

Answer 3

检查待办事项值，如果因错误而为null：未定义地图。

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

3 个答案: