TypeError: Cannot read property 'map' of undefined, in react hooks crud application

Question

我正在使用 React.js 开发一个简单的 crud 应用程序，我遇到了这个问题："TypeError: Cannot read property '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;

Answer 1

您应该使用 state 而不是 props，因为您将 API 响应设置为 state

  render() {
    const { events } = this.state;
    ...

Answer 2

如果 API 返回的数据是 undefined，则将空数组设置为 events。现在您还没有添加处理该场景的条件。如果您从响应中获得的 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 || [];

Answer 3

在状态

events

从状态而不是道具中读取事件：
（可选）使用 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>
    );
  }
}

TypeError: Cannot read property 'map' of undefined, in react hooks crud application

TypeError: Cannot read property 'map' of undefined, in react hooks crud application

javascript

crud

laravel

reactjs

react-hooks