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&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;{&nbsp;events&nbsp;}&nbsp;=&nbsp;this.state; &nbsp;&nbsp;&nbsp;&nbsp;...

Answer 2

在状态上设置events为空数组从 state 而不是 props 中读取事件：（可选）使用loadingstate 显示加载器并确定何时获取数据。class DisplayEvent extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = { value: '', loading: true, events: [] }; // use array here&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.setState({ loading: true });&nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; .get('http://127.0.0.1:8000/api/events')&nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ events: response.data, loading: false });&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(function(error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; this.setState({loading: false});&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; const { events, loading } = this.state; // get events from the state&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Events</h1>&nbsp; &nbsp; &nbsp; &nbsp; <table className="table table-hover">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>ID</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Event Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Event Description</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="200px">Actions</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {loading ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Loading events...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; events.map(event => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <Event key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}

Answer 3

events如果 API 返回的数据是，则设置一个空数组undefined。现在您还没有添加条件来处理这种情况。如果您undefined从响应中获得一个不是数组的值，这就是它显示此错误的原因。&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ events: response.data || [] });&nbsp; componentDidMount() {&nbsp; &nbsp; axios.get('http://127.0.0.1:8000/api/events')&nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ events: response.data || [] });&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(function (error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; })&nbsp; };更新const events = this.props.events || [];