React中从matchedLog对象渲染div无内容显示的问题求助

你传入的matchedLog本身是单条日志的单层对象，结构如下：

{
  dateKey: "2021-08-17", 
  mealKey: "breakfast", 
  foodSelectedKey: ["Test"], 
  reactionKey: "neutral"
}

调用Object.entries(matchedLog)会把这个对象转为键值对数组，结构为：

[
  ["dateKey", "2021-08-17"],
  ["mealKey", "breakfast"],
  ["foodSelectedKey", ["Test"]],
  ["reactionKey", "neutral"]
]

你在map回调中尝试取value.dateKey，但这里的value是对应字段的原始值（字符串、数组等），没有dateKey属性，取值结果为undefined，所以渲染无内容。

如果该函数仅用于渲染单条日志，无需遍历对象键值对，直接从matchedLog取对应字段即可，同时注意数组类型的foodSelectedKey不能直接渲染，需要转成字符串或者单独遍历：

renderMatchedLogs = (matchedLog) => {
  return (
    <div>
      {matchedLog.dateKey}
      <br />
      {matchedLog.mealKey}
      <br />
      {/* 数组转字符串渲染，也可以自行map遍历生成节点 */}
      {matchedLog.foodSelectedKey.join('、')}
      <br />
      {matchedLog.reactionKey}
      <br />
    </div>
  );
};

如果你的设计预期是matchedLog为包含多条日志的集合对象，需要检查入参传入逻辑，确保传入的是符合预期的多日志集合结构。

内容的提问来源于stack exchange，提问作者Candace