javascript - 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 call result},{2ndAPI call result}…] }],

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

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

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

非常感谢您的帮助！

标签： javascriptreactjsfetchsetstate

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 。