Javascript 状态数组在React.js中无法正确呈现

我正在开发一个黑客新闻克隆，我正在尝试使用componentDidMount中的axios从他们的api获取顶级新闻的ID，然后再调用axios来获取新闻并将其推送到状态数组中，但当我尝试映射并渲染该数组时，什么都没有显示

class App extends Component {

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

  componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
              this.state.posts.push(value)
            })
            .catch(err =>{
              console.log(err)
            })
        })
      })
      .catch(err => {
          console.log(err);
      })
  }


  render() {
    return (
    <div>
      <Header title="Hacker News" />
      {this.state.posts.map( (element, index) => <Post key={element.data.id} serialNum={index} postTitle={element.data.title} postVotes={element.data.score} postAuthor={element.data.by} />) }
    </div> 
    )
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
员额：[]
}
}
componentDidMount（）{
axios.get（）https://hacker-news.firebaseio.com/v0/topstories.json')
。然后（结果=>{
result.data.slice（0,10）.forEach（元素=>{
axios.get（）https://hacker-news.firebaseio.com/v0/item/“+元素+”.json'）
.然后（值=>{
this.state.posts.push（值）
})
.catch（错误=>{
console.log（错误）
})
})
})
.catch（错误=>{
控制台日志（err）；
})
}
render（）{
返回(
{this.state.posts.map（（元素，索引）=>）}
)
}
}

componentDidMount（）

仅在

Render（）之后调用一次。React不知道状态更改，除非您使用
setState（）

使用
this.setState（{posts:[value，…this.state.posts]}）
而不是
this.state.posts.push（value）
。使用。。。（spread运算符）将值附加到原始posts数组。
尝试如下设置状态：

 axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
              this.setState({
                posts: [value, ...this.state.posts]
              })
            })
            .catch(err =>{
              console.log(err)
            })
        })

这样，您就可以使用
setState
并将每个新值追加到现有状态。
如注释中所述，不要使用push for set state。在代码中，当您发出第二个请求时，必须更改
setState
方法以分散新值

class App extends React.Component {

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

  componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
               this.setState(prevState => ({posts: [ value.data, ...prevState.posts]}))
            })
            .catch(err =>{
                console.log("err");
                console.log(err);
            })
        })
      })
      .catch(err => {
          console.log(err);
      })
  }


  render() {
    return (
       <div>
          {this.state.posts && this.state.posts.map( (element, index) => 
             <div key={element.id}>
                {element.title}
             </div>
          )}
        </div> 
    );
  }
 }

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
员额：[]
}
}
componentDidMount（）{
axios.get（）https://hacker-news.firebaseio.com/v0/topstories.json')
。然后（结果=>{
result.data.slice（0,10）.forEach（元素=>{
axios.get（）https://hacker-news.firebaseio.com/v0/item/“+元素+”.json'）
.然后（值=>{
this.setState（prevState=>（{posts:[value.data，…prevState.posts]}））
})
.catch（错误=>{
控制台日志（“err”）；
控制台日志（err）；
})
})
})
.catch（错误=>{
控制台日志（err）；
})
}
render（）{
返回(
{this.state.posts&&this.state.posts.map（（元素，索引）=>
{element.title}
)}
);
}
}
不要这样做：
this.state.posts.push（value）
相反，创建一个数组并执行
this.setState（{posts:newArray}）
是的，我也试过了，但仍然没有出现，奇怪的是当我尝试控制台.log（this.state.posts）时数组正确地显示在控制台中，但在renderi中没有显示任何内容。如果您使用的是async/await，则不需要chain.then和.catch。而这并不是关键。this.state.posts将只包含来自hacker news的最后一篇文章，因为您正在替换forEach循环中的状态。谢谢更正。我对http调用使用不同的方法，因此这已成为一种习惯。问题是，他使用了一种不知道状态变化的推力。最好用单独的方法提取http调用并等待响应。
class App extends React.Component {

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

  componentDidMount() {
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
      .then( result => {
        result.data.slice(0, 10).forEach(element => {
          axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
            .then( value => {
               this.setState(prevState => ({posts: [ value.data, ...prevState.posts]}))
            })
            .catch(err =>{
                console.log("err");
                console.log(err);
            })
        })
      })
      .catch(err => {
          console.log(err);
      })
  }


  render() {
    return (
       <div>
          {this.state.posts && this.state.posts.map( (element, index) => 
             <div key={element.id}>
                {element.title}
             </div>
          )}
        </div> 
    );
  }
 }