Question

我有一个函数，需要一些时间来获取数据。首次返回数据this.state时无法返回渲染，因此，基于类似这样的许多其他问题，我尝试使用三进制并在数据准备好后重新渲染。我使用setState的回调版本：

 this.setState(prevState => ({ comments: [...prevState.comments, top100Resolved ] }))

当数据（数组）以setState返回时，我无法访问它。目标是在其上映射并通过模板推送它，但我什至无法对其进行索引。这是渲染器。

render(){
//true once there is some state
   let bool = this.state.comments.length

      return (
        <div className="data">
        {
            bool ? 
    //Want to render markup here
          this.state.commments.map(comment => {
     <div>comment</div>  //nothing happens
      })
           : <div>Not ready</div> 
        }

      </div>)
  }

将出现第一个Not Ready。但是，即使bool为真，而我又回到[Array(0)]时，也无法索引到它。 [Array(0)][0]产生[]，它是一组对象。 [Array(0)][0][0]应该是一个对象，但应该是undefined.，因此map功能目前无法实现。

https://jsfiddle.net/drumgod/375bzycv/282/

Answer 1

将ID映射到Promise的方式不正确。您要做的就是为每个ID设置一个承诺，但不等待其完成。而是使用requestCode并废弃整个诺言映射阶段：

Promise.all

这将等待每个注释进入设置状态之前，而不是进入任何状态之前进入设置状态。您还可以将Promise.all(top100Promises.map(id => { return this.getStory(id).then(obj => { if(obj) { if(obj.type === 'comment') { return obj } } })) .then(comments => { this.setState(prevState => ({ comments: [...prevState.comments, ...comments.filter(o => o)] // this filter removes non-comments that are undefined })) })代码缩短为：

top100Promises

请参见the updated JSFiddle。

React render-由于时序原因无法访问数组数据

1 个答案: