javascript - React CRUD 应用程序中的错误:TypeError:无法解构“this.props.event”的属性“id”,因为它未定义
问题描述
我正在开发一个简单的 Laravel 和 React.js CRUD 应用程序,当我尝试显示事件列表时出现此错误:TypeError: Cannot destructure property 'id' of 'this.props.event' 因为它未定义.
这是 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();
解决方案
而不是使用 this.props.event 尝试在 Event.js 中单独使用 this.props
const { id, eventname, eventdescription } = this.props;
推荐阅读
- r - R:DALEX 解释无法读取目标变量数据
- angular - 在 Angular 7 中导入 PDF 文件
- python - 如何在 SQLAlchemy 更新查询中设置 Python 变量?
- c++ - 依赖于模板参数的条件存储类
- python - 遍历嵌套的 GIMP 组以检索图层数组
- c# - Missed User 属性,用于计算 asp.net 核心身份中的用户/角色数
- c++ - 调试 CMake 项目 Visual Studio Code OSX
- elasticsearch - 在 elastalert-test-rule 或执行规则时未收到警报
- ios - 如何在 iOS 应用程序和今日视图扩展程序之间共享数据
- amazon-web-services - 细微差别到 AWS Connect 接口