TypeError: Невозможно прочитать свойство 'map' из undefined в приложении «перехватывать ответные реакции». - PullRequest
Новая
       6

TypeError: Невозможно прочитать свойство 'map' из undefined в приложении «перехватывать ответные реакции».

0 голосов
/ 16 марта 2020

Я работаю над простым приложением crud с React. js и у меня возникает такая проблема: «TypeError: Невозможно прочитать свойство 'map' of undefined", когда я пытаюсь отобразить список событий, которые я получить от: http://127.0.0.1: 8000 / api / events (который показывает список событий в формате json).

Вот код: 

import React, { Component } from 'react';
import Event from './Event';
import axios from 'axios';

class DisplayEvent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '', events: '' };
  }
  onDelete = id => {
    // console.log("event list ", id);
    this.props.onDelete(id);
  };

  onEdit = id => {
    // console.log("event list ", id);
    this.props.onEdit(id);
  };

  componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/events')
      .then(response => {
        this.setState({ events: response.data });
      })
      .catch(function (error) {
        console.log(error);
      })
  };



  render() {
    const events = this.props.events;
    return (
      <div>
        <h1>Events</h1>




        <table className="table table-hover">
          <thead>
            <tr>
              <td>ID</td>
              <td>Event Name</td>
              <td>Event Description</td>
              <td width="200px">Actions</td>
            </tr>
          </thead>
          <tbody>
            {events.map(event => {
              return (
                <Event
                  key={event.id}
                  event={event}
                  onDelete={this.onDelete}
                  onEdit={this.onEdit}
                />
              )
            })}

          </tbody>
        </table>
      </div>
    )
  }
}
export default DisplayEvent;

Ответы [ 3 ]

2 голосов
/ 16 марта 2020

Вы должны использовать state вместо props, так как вы устанавливаете ответ API на state

  render() {
    const { events } = this.state;
    ...
1 голос
/ 16 марта 2020
  1. Установите events в пустой массив в состоянии
  2. Считайте события из состояния вместо реквизитов:
  3. (Необязательно) используйте состояние loading для отображения загрузчик и определите, когда были получены данные. 
class DisplayEvent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '', loading: true, events: [] }; // use array here
  }

  componentDidMount() {
    this.setState({ loading: true });
    axios
      .get('http://127.0.0.1:8000/api/events')
      .then(response => {
        this.setState({ events: response.data, loading: false });
      })
      .catch(function(error) {
        console.log(error);
        this.setState({loading: false});
      });
  }

  render() {
    const { events, loading } = this.state; // get events from the state
    return (
      <div>
        <h1>Events</h1>
        <table className="table table-hover">
          <thead>
            <tr>
              <td>ID</td>
              <td>Event Name</td>
              <td>Event Description</td>
              <td width="200px">Actions</td>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <p>Loading events...</p>
            ) : (
              events.map(event => {
                return <Event key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />;
              })
            )}
          </tbody>
        </table>
      </div>
    );
  }
}
1 голос
/ 16 марта 2020

Установить пустой массив на events, если данные, возвращаемые API, равны undefined. Прямо сейчас вы не добавили условие для обработки этого сценария. Если вы получите значение undefined из ответа, который не является массивом, вот почему он показывает эту ошибку. 

        this.setState({ events: response.data || [] });


  componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/events')
      .then(response => {
        this.setState({ events: response.data || [] });
      })
      .catch(function (error) {
        console.log(error);
      })
  };

ОБНОВЛЕНИЕ 

const events = this.props.events || [];
...