设置后状态元素不会在浏览器中呈现

Question

我正在尝试从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;

问题在于，即使在控制台中成功打印了列表，也是如此。它不会在浏览器上呈现。 请帮助我确定我在做什么错。我的控制台日志如下图所示：

Answer 1

您指的是this.testList组件中的Col，而不是this.state.testList。 this.testList不存在，因此不呈现任何内容。