循环中的 Promise 内的 return 语句不起作用答案

【问题标题】：return statement inside a promise in a loop is not working循环中的 Promise 内的 return 语句不起作用
【发布时间】：2021-06-04 19:00:22
【问题描述】：

const renderPicCards=()=>{
    return albums.assets.map(element => {  
      AsyncStorage.getItem(element.filename).then((result)=>{
        return(    
          <PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />
          )
      })
        .catch((err)=>{console.log('error is',err)})  
    
})

}

这里的 return 语句不起作用； asyncstorage 将导致承诺..我在这里做错了什么？ 我基本上想要一个卡片列表，其中一个道具正在从异步存储库中获取

【问题讨论】：

这能回答你的问题吗？ Using promise function inside Javascript Array map
你可以全部使用promise。
@navaneeth001 我认为您应该将代码包装在 map 中的 promise 中，或者您可以使用异步等待。
我不认为你可以异步渲染任何东西，不管有没有循环。您需要获取数据，将其存储在状态中并根据状态渲染组件

标签： javascript reactjs react-native

【解决方案1】：

我相信在 AsyncStorage 之前添加一个 return 会解决您的问题。

return albums.assets.map(element => {  
  return AsyncStorage.getItem(element.filename).then((result)=>{
    return(    
      <PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />
      )
  })
    .catch((err)=>{console.log('error is',err)})

【讨论】：

不，它不工作..似乎承诺还没有解决

【解决方案2】：

您应该异步/等待来自 AsyncStorage 的响应。

const renderPicCards = () => {
   return albums.assets.map( async (element) => {
      try {
         const result = await AsyncStorage.getItem(element.filename);
         return (<PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />);
      } catch (err) {
         console.log('error is', err);
      }
   });
};

【讨论】：

【解决方案3】：

我通过在主组件中获取子组件 piCard 中的异步数据解决了这个问题，它工作正常..谢谢 :)

`function picCard(props) {
const [details,setdetails]=useState(null);
useEffect(() => {
  AsyncStorage.getItem(props.filename).then((result)=>{
    setdetails(JSON.parse(result))
  }).catch((err)=>{console.log('error is',err)});
}, [])
...more code

【讨论】：