Question

我正在使用react-bootstrap组件。

该控制台下面的行记录REST api响应，显示准确的数据。

错误位于第models.map(...行

我一直在使用Google搜索，发现有很多似乎是我需要的答案的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;

React组件迭代数据行：TypeError：无法读取未定义的属性“ map”

1 个答案: