После настройки состояния элементы не отображаются в браузере - PullRequest
Новая
       65

После настройки состояния элементы не отображаются в браузере

0 голосов
/ 21 апреля 2020

Я пытаюсь получить некоторые данные из API и отобразить их в своем браузере. Мой код, как показано ниже: 

import React from 'react'
import {Col, Container, Row} from "react-bootstrap";
import {getTests} from "../services/getTests.setvice";
import TestRow from "../components/testRow.component";

class HomeScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            testList: []
        }
    }

    componentDidMount = async () => {
        const list = await getTests();
        this.setState({testList: [...list]});
    };


    render() {
        console.log(this.state.testList);
        return (
            <Container style={{maxWidth: '100%'}}>
                <Row>{this.testList ? this.testList.length : 0}</Row>
                <Row style={{height: 100}}>
                    <Col md={3}>{!this.testList ? <div>No test found</div> : this.testList.map((test) => {
                        return <TestRow>{test.attributes.name}</TestRow>
                    })}</Col>
                    <Col md={9}></Col>
                </Row>
            </Container>
        )
    }
}

export default HomeScreen;

Проблема в том, что, хотя список успешно печатается в консоли. Он не отображается в браузере. Пожалуйста, помогите мне определить, что я делаю неправильно. Мой консольный журнал как на скриншоте ниже: enter image description here

1 Ответ

1 голос
/ 21 апреля 2020

Вы имеете в виду this.testList в вашем Col компоненте, а не this.state.testList. this.testList не существует, поэтому он ничего не отображает.

...