时间戳

首页 > 解决方案 > 状态数组在 React.js 中无法正确呈现

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

标签： javascriptreactjs

解决方案

尝试像这样设置状态：

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

推荐阅读