Реагирующий компонент повторяет строки данных: TypeError: Невозможно прочитать свойство 'map' из неопределенного

Question

Я использую компонентыact-bootstrap.

В строке под этим console.logs отклик API REST, показывает точные данные ожидаемые.

Ошибка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;