代码之家 › 专栏 › 技术社区 › Philip Isbouts

如何从promise映射数组

promise typescript reactjs

Philip Isbouts · 技术社区 · 1 年前

我不熟悉promise,也找不到如何从中检索属性。我继承了以下代码:

   const [MessageData, setMessageData] = useState<any | null>(null);         
   const [snackbarData, setSnackbarData] = useState<any | null>(null);        
   PCore.getFeedUtils().getFeeds(feedKey, 'pyDashboardFeed', className, [], [],     thePConn,   false)       
       .then(() => {         
            setMessageData({           
                messageList: thePConn.getValue("pulse.messages","") || {},            
                messageIDs: (thePConn.getValue("pulse.messageIDs","")as any) || [],       
            });     
        })       
        .catch(() => {         
             setSnackbarData({ show:true, message:"Error retrieving comments"});     
        });

我需要获取messageList中的属性,但我不知道该怎么做。

如果我将messageData字符串化,我会得到以下结果:

{"messageList": {       
   "SOCIAL M-369": {         
      "pxUpdateDateTime":"2025-01-13T19:50:39.417Z",         
      "pxCreateDateTime":"2025-01-13T19:50:39.417Z",         
      "postedByUser":{           
         "name":"Paul Smith",           
         "ID":"[email protected]"           
      },         
      "pyMessage":"test comment 2",         
      "ID":"SOCIAL M-369"       
   },        
   "SOCIAL M-368":{          
      "pxUpdateDateTime":"2025-01-13T19:45:29.091Z",          
      "pxCreateDateTime":"2025-01-13T19:45:29.091Z",          
      "postedByUser":{            
         "name":"Paul Smith",            
         "ID":"[email protected]"           
      },          
      "pyMessage":"test comment",          
      "ID":"SOCIAL M-368"        
   }      
},      
"messageIDs":["SOCIAL M-369","SOCIAL M-368"]}

但我无法确定如何在messageList中显示属性列表。我试过了

const messageDetail = MessageData.map(messageList => (         
   <li key={messageList.ID}>           
      <div>{messageList.pyMessage}</div>         
   </li>       
))

但得到错误“无法读取null的属性(读取'map')”。你知道如何正确定义这份清单吗?

1 回复 | 直到 1 年前

Producdevity 1 年前

问题

问题的产生是因为 MessageData 开始于 null ,当您尝试直接在其上使用map时,它会抛出错误。(自 map 是一种方法 Array .)

你可以采取不同的方法,但我个人会这样做:

方法1:

const [MessageData, setMessageData] = useState<any | null>(null); 

const messageDetail = MessageData?.messageIDs?.map(messageId=> (         
   <li key={messageId}>           
      <div>{MessageData?.messageList?.[messageId]?.pyMessage}</div>         
   </li>       
))

使用 可选链接(?.) 确保代码在无法访问属性时不会中断。 Docs

这样,您就可以在数组上进行映射 messageIDs 只包含id,然后使用 messageID 作为获取存储在中的完整数据的索引 messageList .

方法2:

您正在存储2个属性 消息数据 , 消息列表 和 消息ID .由于 消息列表 是一个 Object 而不是a 阵列 你必须先把它改造一下 地图 (使用 Object.values )

const messageDetail = MessageData?.messageList 
  ? Object.values(MessageData.messageList).map(message => (
      <li key={message.ID}>
        <div>{message.pyMessage}</div>
      </li>
    ))
  : null; // Handle the case where MessageData or messageList is null

旁注

公约 useState ,一般来说,JS/TS中的大多数变量名都是使用camelCase。所以 消息数据 会是 messageData .

每当你看到以大写字母开头的东西时,在大多数情况下,如果遵循约定,你可以假设它是类或类型/接口。