如何将promise返回的值添加到React中的动态数据列表中？

Question

我正在转换一个建在Wordpress上的大型网站来回应，我的问题是：

• 在ComponentDidMount上，我将调用一个API并获得一长串ID列表，这些ID将添加到我的状态中。ID对应于需要动态呈现的人员。
• 所以现在我将状态设置为ID数组，我将对其进行映射以返回一些JSX，

即arrayids.map（id=>{return img src={async value====img URL returned from promise}/>

null

import Async from 'react-promise'

const imgPromise = axios.get('someAPI/' + imageID);

<Async 
  promise={imgPromise} 
  then={ ( resolvedData ) => <img src={ resolvedData.imgURL } /> } 
/>

Answer 1

看来您应该重新考虑如何在React中使用state的假设，因为您绝对应该在这里使用它。“Ican't use state b因为我不知道需要呈现多少图像ID”<=这显然是假的，因为在您的文章中，您提到了用从API调用获得的ID列表更新state。因此，您已经在更新state时使用了一个异步操作返回的值...您认为异步获取URL与最初获取ID有何区别？

其中一种方法是：

顶层组件安装。它获取API以获取ID。呈现完成，但正在等待API调用。

this.state = {
    items: []
}

this.state = {
    items: [
        {id: "foo"},
        {id: "bar"},
        {id: "baz"}...
    ]
}

this.state = {
    items: [
        {id: "foo"},
        {id: "bar", url: "http://bar.com"},
        {id: "baz"}...
    ]
}

this.state = {
    items: [
        {id: "foo", url: "http://foo.com"},
        {id: "bar", url: "http://bar.com"},
        {id: "baz", url: "http://baz.com"}...
    ]
}

render() {
    return (
        <div>
            {
                this.state.items.map((ea, i) => {
                    return <img key=`img${i}` src={ea.url ? ea.url : "placeholder.jpg"} />
                }
            }
        </div>
    );
}