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. （可选）使用loadingstate 显示加载器并确定何时获取数据。

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

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