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

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

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

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

After setting state elements are not rendered in the browser

reactjs

react-state-management

react-state