在 React 中从 Mongoose 渲染对象数组

Question

我使用节点 js + React。我有来自猫鼬的数据，通常具有这种格式：

{
  "_id": "61b711721ad6657fd07ed8ae",
  "url": "/esports/match/natus-vincere-vs-team-liquid-14-12",
  "dataInfo1param1": [
    [
      {
        "oddTitle": "Winner",
        "odddTitle": "FadeGaming | okura",
        "oddvalue": "2.58 | 1.48 | 13 09:28:12//2.71 | 1.44 | 13 12:25:37"
      }
    ]
  ]
}

在MatchCard.js 组件中，我已经从我的节点 js 路由器正确传递了匹配数据，但我无法在反应页面上输出它。这里是组件代码

import React from 'react';

export const MatchCard = ({ match }) => {
  return (
    <div>
      <p>{match.url}</p>
      <p>{match.dataInfo1param1}</p>
    </div>
  );
};

match.url 值正确输出。但是 match.dataInfo1param1 抛出错误 Error: Objects are not valid as a React child (found: object with keys {oddTitle,odddTitle,oddvalue})。如果您打算渲染一组子项，请改用数组。

我尝试输出 { match.dataInfo1param1['oddTitle'] } 但它显示空值...

所以问题是如何输出oddTitle 和oddvalue 的数组键值？也许我应该映射它们，然后以不同的方式渲染它们？

谢谢

Answer 1

由于 dataInfo1param1 是一个数组，你可以像这样访问值oddTitle

{ match.dataInfo1param1[0][0].oddTitle }

如果上述行不起作用，请删除一个[0]。