Браузер выбрасывает TypeError: Невозможно прочитать свойство 'map' из неопределенного - PullRequest
Новая
       7

Браузер выбрасывает TypeError: Невозможно прочитать свойство 'map' из неопределенного

0 голосов
/ 30 апреля 2020

Я новичок ie в React и создаю приложение todo, используя его. Для вывода списка задач, введенных пользователем, я пытаюсь использовать карту для go по всем задачам и добавил функцию, позволяющую удалить любую из задач.

Вот мой 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;

браузер выдает ошибку: Ошибка типа: не удается прочитать свойство 'map' из неопределенного

enter image description here

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Пожалуйста, убедитесь, что todos является массивом, а не неопределенным. undefined.map() явно не имеет смысла. Поэтому убедитесь, что импортируется правильно, и вы действительно можете сделать как todos && todos.map().

1 голос
/ 30 апреля 2020

Это очень распространенная проблема с 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, если нет, то ничего не рендерить.

Надеюсь, это вам поможет.

0 голосов
/ 30 апреля 2020

проверить значение todos, если ошибка равна нулю: карта не определена.

...