渲染中的反应状态在返回中不可用

Question

我有这些方法可以进行一些获取，然后一旦完成，它们就会设置状态。但是渲染是在状态完成之前调用的，并且不会更新。

以下内容似乎可以自行完成，但需要一分钟才能完成。

     //returns an promise with Array
    getTopIDs(url) {
        return fetch(url).then(blob => blob.json()).then(json => json)
    }

     // makes a URL fetchs JSON and return promise with single ID
    getStory(id) { 
        let url = `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`
        return fetch(url).then(blob => blob.json()).then(json => json)
    }

   // call above methods, set state when done
    componentDidMount() { //
        let arr = []
        let promise = new Promise((resolve, reject) => {
            let data = this.getTopIDs("https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty").then((idArr) => {
                idArr.forEach((id, index) => {
                    this.getStory(id).then(res => {
                        arr.push(res)
                    })
                })
        //resolve once all pushed to arr
                resolve(arr)
            })
        })
    // set state once array is completed
        promise.then(res => {
            return this.setState({data: arr})
        })
    }

然后在下面的渲染中记录“否”、“否”并停止。在返回之外尝试它会记录“否”，“是”。搜索其他帖子我尝试在完成后设置一个布尔值并使用状态回调，但这些都不起作用（完全披露：我不太了解 setState 回调选项）

render() {
        return (
        <div>
            {
                this.state.data.length
                    ? console.log('yes')
                    : console.log('no')
            }
        </div>)
    }

我需要渲染来处理 this.state.data 仅在完成后。我该怎么做？

添加小提琴：https://jsfiddle.net/drumgod/e2atysu3/6/

Answer 1

您的方法this.getStory() 是异步的，但您对数组创建的处理在您的承诺中是同步的。

您需要使用async/await 或仅在idArr.forEach() 确定完成后运行resolve(arr)（使用Promise.all(idArr.map(...)) 可能更容易，其中... 从this.getStory() 返回结果)。

Answer 2

这就是你想要在getStory 中设置你的状态的方式：

this.setState(prevState => ({
  data: [...prevState.data, res]
}))

如 cmets 中所述，这将为 forEach 中的每个数据点呈现组件。

为了避免这个问题，componentDidMount() 的格式应该是这样的：

componentDidMount() {
  const arr = [];
  this.getTopIDs("https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty").then((idArr) => {
    idArr.forEach((id, index) => this.getStory(id).then(res => arr.push(res)));
    this.setState(prevState => ({ data: [...prevState.data, arr] }))
  })
}

这还可以让您摆脱最后的promise.then 调用。