React 组件迭代数据行：类型错误：无法读取未定义的属性'map'

Question

我正在使用 react-bootstrap 组件。

该控制台下方的行记录了 REST API 响应，确实显示了预期的确切数据。

错误在联机models.map(...

我一直在谷歌上搜索，发现了多篇SO文章，这些文章似乎是我需要的答案。然而，他们不是。我的代码中有些不同或缺少某些东西，这使得我迄今为止发现的 SO 答案无效。你能看出我做错了什么吗?...

import React, { Component } from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import AuthService from './AuthService';
import './css/Dashboard.css';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
authService: new AuthService(),
data: {
models: []
},
};
}
componentWillMount = async () => {
try {
const state = { ...this.state };
state.data = await state.authService.apiFetch('http://localhost:2000/message', {
method: 'GET'
});
this.setState(state);
console.log('Dashboard.jsx: apiFetch: ', state.data);
} catch (error) {
console.error('Dashboard.jsx: apiFetch: ', error);
}
};
render() {
const { models } = this.state.data.models;
return (
<Grid>
{models.map((model, idx) => {
return <Row key={idx}>
<Col xs={12} sm={4}>{model.id}</Col>
<Col xs={12} sm={4}>{model.name}</Col>
<Col xs={12} sm={4}>{model.createdByUser}</Col>
</Row>;
})}
</Grid>
);
}
}
export default Dashboard;

Answer 1

你需要解构data对象而不是data.models

const { models } = this.state.data;