如何在反应类中正确等待获取

Question

我有一个类，我必须检查是否存在要以一种 html 形式（比如超链接）或普通文本显示的项目。

我将对象作为道具。我发现很难使用 fetch 根据返回码正确识别项目是否存在

    this.props.item.map(function(item) {
          fetch(url+item)(). then (
              if(statusCode === 200)
                 //display hyperlink
                 return <a href=url+item>{item.a:item.b}</a>
              else
                 //normal text
                 return <disp>{item.a:item.b}</disp>
          )
         // But its expecting a return here!
         //return <disp>{item.a:item.b}</disp>
    })

Answer 1

问题是这是异步代码。

你有几个问题：

首先，（如果我假设这是一个 Array.prototype.map 函数是正确的）.map 函数需要返回一些东西。 map 函数将一个数组转换为另一个相同大小的数组。

其次，更重要的是，fetch 返回一个Promise。

因此，即使您将代码更改为：

this.props.item.map(function(item) {
     return fetch(url+item)(). then (
          if(statusCode === 200)
             //display hyperlink
             return <a href=url+item>{item.a:item.b}</a>
          else
             //normal text
             return <disp>{item.a:item.b}</disp>
      )         
})

您将得到的只是一系列承诺。

我建议你开始使用react-redux，我个人建议使用redux-saga。

redux 和其他状态管理解决方案的基本概念是，您的 React 组件负责显示数据和响应用户交互（通常通过调度 redux 操作） 只要。他们不应该负责实际获取或操作数据。这就是您的状态管理中间件（例如 redux-saga）的用途。

我不会在这里讨论它，但这应该会让你朝着正确的方向前进。