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

我在reactjs组件上的javascript对象数组中循环时遇到了问题。chrome浏览器检查视图从console.log提供此输出---

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

posts.json文件---

1.json文件---

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

import React，{Fragment，Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
进口{
集装箱
}来自“反应带”；
类主页扩展组件{
state={posts:[]}
getPost（路径）{
axios.get（路径）
.then（res=>（this.state.posts.push（res.data））；
}
componentDidMount（）{
get（'./post data/posts.json'）
.then（response=>response.data.map（（value）=>(
this.getPost（'./post data/'+value+'.json'））
)));
log（this.state.posts）；
}
render（）{
const listItems=this.state.posts.map（（数据，键）=>
{key}
);
返回(
{this.state.posts？
{listItems}
：找不到帖子！
}
)
}
}
导出默认主页；

---

但屏幕上什么也没显示。请帮帮我

您需要使用setState，否则不会调用重新渲染

将getPost方法更改为：

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

---

我认为您的问题在于渲染返回中缺少括号，请尝试：

返回(
{this.state.posts？（
{listItems}
)：（找不到帖子！
）}
)

基本上区别在于你的条件回报，每个部分都用括号

condition？（返回1）：（返回2）

---

另外，当您试图直接在

this.getPost（）

中变异状态时，您可能会遇到问题。您应该使用

this.setState（）

来代替

this.state.posts.push（something）

您应该使用

this.setState（）

来编写

this.setState（prev=>（{posts:[…prev.posts，something]））

this.state.posts.push（res.data）

关于状态的数据应该是不可变的，也就是说，你应该复制

this.state.posts

并将其推到新数组上。此外，你应该使用

setState

而不是直接更改

this.state

。通过直接设置状态，React不会意识到状态的变化，因此不会改变现在重新渲染。这回答了你的问题吗？@benbotto brother，我如何在我的场景中设置state？你能详细说明一下吗！我认为这不太正确，因为这将

res.data

中的单个post设置为

posts

on state的数组。是的。设置state并没有存储每个json文件的所有数据。我已经更新了我的答案误解了api返回的内容

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

[1,2,3,4,5]

{
    "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;

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

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