javascript - React CRUD 应用程序中出现错误 : TypeError: Cannot destructure property 'id' of 'this.props.event' as it is undefined

Question

我正在开发一个简单的 Laravel 和 React.js CRUD 应用程序，当我尝试显示事件列表时出现此错误: TypeError: Cannot destruct property 'id' of 'this.props.event' as它是未定义的。

这是 Event.js 的代码:

import React, { Component } from 'react';
import axios from 'axios';

class Event extends Component {  
  render() {
    const { id, eventname, eventdescription } = this.props.event;
    return (
        <tr>
          <td>
            {id}
          </td>
          <td>
            {eventname}
          </td>
          <td>
            {eventdescription}
          </td>

        </tr>
    );
  }
}


export default Event;

这是 DisplayEvent 文件的代码:

import React, {Component} from 'react';
import axios from 'axios';
import Event from './Event';
class DisplayEvent extends Component {
  constructor(props) {
       super(props);
       this.state = {value: '', events: ''};
     }
     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>


        <div className="row">
          <div className="col-md-10"></div>
          <div className="col-md-2">

          </div>
        </div><br />


        <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 
                    id={event.id}
                    eventname={event.eventname}
                    eventdescription={event.eventdescription}/>
                )
              })}

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

这是我的 app.js 文件:

import React from 'react';
import { Component } from 'react';
import axios from 'axios';
import './App.css';
import DisplayEvent from './components/DisplayEvent';
import { render } from '@testing-library/react';
class App extends Component {
  state = {
    events: [],
    loader: false,
    event: {},
    url: "http://127.0.0.1:8000/api/events"
  };
  getEvents = async () => {
    this.setState({ loader: true });
    const events = await axios.get(this.state.url);
    this.setState({ events: events.data, loader: false });
  };
  componentDidMount() {
    this.getEvents();
  };
  render(){
  return (
    <div className="App">
       <DisplayEvent events={this.state.events}/>
    </div>
  );
}
}

export default App;

这是我的index.js 文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.querySelector('#root'));

serviceWorker.unregister();

Answer 1

不要使用 this.props.event 尝试在 Event.js 中单独使用 this.props

const { id, eventname, eventdescription } = this.props;