Reactjs 不显示从状态生成的动态数据

Question

我在遍历 reactjs 组件上的 javascript 对象数组时遇到问题。 chrome 浏览器检查视图给出来自 console.log ---

的输出

0: {id: 1, title: "This is a post 1"}
1: {id: 2, title: "This is a post 2"}
2: {id: 3, title: "This is a post 3"}
3: {id: 4, title: "This is a post 4"}
4: {id: 5, title: "This is a post 5"}
length: 5
__proto__: Array(0)

我已将 json 文件存储在 public 文件夹中，如下所示 ---

public
--post-data
----posts.json
----1.json
----2.json
----3.json
----4.json
----5.json

posts.json 文件 ---

[1,2,3,4,5]

1.json 文件 ---

{
    "id": 1,
    "title": "This is a post 1"
}

这是我的数据获取函数---

import React, { Fragment, Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import {
    Container, Row, Col, Jumbotron
} from 'reactstrap';

class HomePage extends Component {

    state = { posts: [] }

    getPost(path) {
        axios.get(path)
            .then(res => (this.state.posts.push(res.data)));
    }

    componentDidMount() {
        axios.get('./post-data/posts.json')
            .then(response => response.data.map((value) => (
                this.getPost('./post-data/' + value + '.json')
            )));
        console.log(this.state.posts);
    }

    render() {

        const listItems = this.state.posts.map((data, key) =>
            <Col lg={{ size: 4 }} className="mb-3">{key}</Col>
        );

        return (
            <Fragment>
                {this.state.posts ? <section>
                    <Container>
                        <Row>
                            {listItems}
                        </Row>
                    </Container>
                </section> : <p>No posts found!</p>}
            </Fragment>
        )
    }

}

export default HomePage;

但是屏幕上没有显示任何内容。请帮助我！

Answer 1

您需要使用 setState，否则 re-render 不会被调用。

将您的 getPost 方法更改为：

getPost(path) {
    axios.get(path)
        .then(res => this.setState({posts: this.state.posts.concat([res.data])}))
}

Answer 2

我认为你的问题是你在 render return 中缺少括号，试试：

return (
    <Fragment>
        {this.state.posts ? (<section> 
            <Container>
                <Row>
                    {listItems}
                </Row>
            </Container>
        </section>) : (<p>No posts found!</p>)}
    </Fragment>
)

基本上区别在于你的条件 return，每个部分都用括号标记 condition ? (return 1) : (return 2)

此外，您可能会遇到问题，因为您正试图直接在 this.getPost() 中改变状态，您应该使用 this.setState() 而不是 this.state.posts.push(something)，这样您就可以编写 this.setState(prev => ({posts: [...prev.posts, something]})).

Reactjs 不显示从状态生成的动态数据

Reactjs not showing the dynamic data generated from state

javascript

json

public

reactjs

axios