React 组件中状态的更新时间问题（需要单击 2 次而不是 1 次）

Question

我正在使用 React 进行一个单独的项目，过去 2 天我一直在做一些事情……我正在开始，我是初学者，所以它可能是非常基础的东西，但我很挣扎。 ..

尽量简洁明了：

我有一个 searchBar 组件，它通过本地数据库进行搜索，并返回与搜索关键字关联的对象。到目前为止没有什么复杂的。 每个渲染对象都有一个按钮，用于触发 onClick 函数。上述功能在我的 App 组件中定义如下：

changeState(term){
    let idToRender=[];
    this.state.dealersDb.map(dealer=>{
    if(term===dealer.id){
        idToRender=[dealer];
        }});
    let recoToFind=idToRender[0].reco;
    recoToFind.map(item=>{
        Discogs.search(item).then(response=>{idToRender[0].recoInfo.push(response)})
    })

    this.setState({
    objectToRender: idToRender
    });

为了解释上面的代码，它的作用是首先识别哪个对象的按钮被点击，并将该对象发送到一个名为 idToRender 的变量。然后，它获取该对象的 reco 状态，并将其存储到另一个名为 recoToFind 的变量中。然后它调用recoToFind 上的map() 方法，为recoToFind 数组的每个元素发出一个API 请求（discogs() 方法）并将结果push() 到idToRender 的recoInfo 状态。所以到函数结束时，idToRender 应该是这样的： [{ … … recoInfo: [{1stAPI 调用结果},{2ndAPI 调用结果}…] }]，

该数组包含 1 个对象，该对象具有最初单击的对象的所有状态，加上一个状态 recoInfo，该状态等于由多个 API 调用的结果组成的数组。 最后，它将组件的状态 objectToRender 更新为 idToRender。

这里我的问题是，onClick，我确实获得了在屏幕上呈现的单击对象的所有状态值（正如我对嵌套组件的编码方式所预期的那样），但是，recoInfo 的值没有显示正如预期的那样（应该呈现这些值的组件嵌套在呈现单击的对象其他状态值的组件中）。但是，在第二次单击按钮后，它们会正确显示。所以看来我的问题归结为状态更新时间问题，但我很困惑，因为这个函数调用 setState 一次，我知道状态已更新，因为当我点击按钮时，点击了 Object详细信息会显示出来，但不知何故，似乎只有 recoInfo 状态不可用，但只有在第二次单击时才可用……

有人有办法解决这个问题吗？ :( 不知何故，我觉得我的救赎在于 async/await，但我不确定我是否正确理解它们……

非常感谢您的帮助！

Answer 1

这是你想做的事吗？

changeState(term) {
let idToRender=[];
this.state.dealersDb.map(dealer=>{
if(term===dealer.id){
    idToRender=[dealer];
    }});
let recoToFind=idToRender[0].reco;
recoToFind.map(item=>{
    Discogs.search(item).then(response=>{
        idToRender[0].recoInfo.push(response)
        this.setState({
            objectToRender: idToRender
        });
    })
}) 

}

一旦异步调用完成并收到结果，您就可以调用 setState。