TypeError：无法读取未定义的属性“地图”，在反应挂钩 crud 应用程序中

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

1. 将events 设置为状态上的空数组
2. 从 state 而不是 props 中读取事件：
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>
    );
  }
}

Answer 3

如果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 || [];