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>
    )
  }
}

最佳答案

尝试像这样设置状态：

 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并将每个新值附加到现有状态。

关于javascript - 状态数组无法在React.js中正确呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54821798/