javascript - 使用 React JS 在页面上渲染元素
问题描述
迈出 React 的第一步。请帮助显示这部分:
{
incidents.forEach(incidents => {
incidents.map(inc =>{
return (
<div key={inc.id} className='inc'>
<div className='incDescr'>Description: {inc.title}</div>
</div>
)
})
})
}
在下面的代码中。
import React from 'react';
const api_url = 'http://localhost:8080';
const errorHandler = error => this.setState({ error, isLoading: false });
class AllIncidents extends React.Component{
constructor(props) {
super(props);
this.state = {
incidents: [],
error: null
};
}
getIncidents() {
fetch(api_url + '/incident/')
.then(res => res.json())
.then(data => this.setState({
incidents: [data],
isLoading: false
})
).catch(errorHandler);
}
componentDidMount() {
this.getIncidents();
}
render() {
const { incidents, error } = this.state;
return (
<React.Fragment>
<h1>All Incidents</h1>
{error ? <p>{error.message}</p> : null}
{
incidents.forEach(incidents => {
incidents.map(inc =>{
return (
<div key={inc.id} className='inc'>
<div className='incDescr'>Description: {inc.title}</div>
</div>
)
})
})
}
</React.Fragment>
);
}
}
export default AllIncidents;
来自后端的响应:
[{"id":"5d923ecd9a65603e8bd1022f","title":"Incident 6","description":null,"status":null},{"id":"5d923fc49a65603e8bd10230","title":"Incident 6","description":null,"status":null},{"id":"5d923fc79a65603e8bd10231","title":"Incident 6","description":null,"status":null},{"id":"5d923fc89a65603e8bd10232","title":"Incident 6","description":null,"status":null},{"id":"5d923fc99a65603e8bd10233","title":"Incident 6","description":null,"status":null},{"id":"5d923fca9a65603e8bd10234","title":"Incident 6","description":null,"status":null},{"id":"5d923fcb9a65603e8bd10235","title":"Incident 6","description":null,"status":null},{"id":"5d923fcc9a65603e8bd10236","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10237","title":"Incident 6","description":null,"status":null},{"id":"5d923fcd9a65603e8bd10238","title":"Incident 6","description":null,"status":null},{"id":"5d923fce9a65603e8bd10239","title":"Incident 6","description":null,"status":null},{"id":"5d923fcf9a65603e8bd1023a","title":"Incident 6","description":null,"status":null},{"id":"5d923fd09a65603e8bd1023b","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023c","title":"Incident 6","description":null,"status":null},{"id":"5d923fd19a65603e8bd1023d","title":"Incident 6","description":null,"status":null},{"id":"5d923fd29a65603e8bd1023e","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd1023f","title":"Incident 6","description":null,"status":null},{"id":"5d923fd39a65603e8bd10240","title":"Incident 6","description":null,"status":null},{"id":"5d923fd49a65603e8bd10241","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10242","title":"Incident 6","description":null,"status":null},{"id":"5d923fd59a65603e8bd10243","title":"Incident 6","description":null,"status":null},{"id":"5d923fd69a65603e8bd10244","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10245","title":"Incident 6","description":null,"status":null},{"id":"5d923fd79a65603e8bd10246","title":"Incident 6","description":null,"status":null}]
解决方案
您正在对数组进行两次迭代,请尝试删除 events.forEach 以使代码如下所示:
{incidents.map(inc => (
<div key={inc.id} className='inc'>
<div className='incDescr'>Description: {inc.title}</div>
</div>
))}
编辑:要解决您无法读取未定义的 setState 的问题,您需要绑定您的函数。将您的 fetch 方法定义为箭头函数应该可以解决问题。或者,您可以在构造函数中绑定该函数。
getIncidents = () => {
fetch(api_url + '/incident/')
.then(res => res.json())
.then(data => this.setState({
incidents: data,
isLoading: false
}))
.catch(errorHandler);
}
推荐阅读
- python - Jupyter笔记本的奇怪问题
- python - PermissionError:[Errno 13] 通过上下文变量包含模板时权限被拒绝,硬编码时工作正常
- python - 公司的 Python 包命名策略
- excel - Excel VBA 日期自动更改
- unity3d - 如何知道 AR 空间中的物体位置?(台式机和移动设备之间的行为不一致)
- routing - 使用 OSM 数据创建路由?
- c++ - C++ 成员变量被非成员函数覆盖
- c# - 是否可以制作包含 .NET Core Framework 的 .NET Core DLL?
- google-apps-script - HTTP 请求在 Playground 上工作不适用于 Google App 脚本
- flutter - 即使在 DateTimePickerFormField Flutter 中选择日期和时间后,FromDateTime 值也设置为 NULL