如何渲染嵌套数组的对象答案

【问题标题】：How to render objects of nested arrays如何渲染嵌套数组的对象
【发布时间】：2018-05-01 19:19:15
【问题描述】：

我想渲染这个嵌套数组的对象。

我需要将所有最宽列表呈现给特定的 boardId

我能得到帮助吗？

需要将这些渲染为 this.props.----

storyboard: {
boardList: [
  {
    boardId: 'c428148c-0f31-48d5-87a2-bf7a3eb7c3db',
    boardTitle: 'Board1',
    createdAt: 1525198421135,
    modifiedAt: 1525198466016,
    widgetList: [
      {
        widgetId: '4015e24a-aac6-4480-8cb4-a1b72c4cc5ff',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      },
      {
        widgetId: 'bf363922-60d6-4bf0-8f1a-ddf5c0c6eee7',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      }
    ]
  }
]
}

【问题讨论】：

How to render an array of objects in React? 可能重复
@ShubhamKhatri 你能检查一下这个问题吗？？
我从你的问题中推断出的只是你想要渲染嵌套的对象数组，重复的问题虽然在一个级别上解释了如何做到这一点。您只需要以嵌套的方式进行操作。如果还不清楚，请查看stackoverflow.com/questions/45391680/…

标签： arrays json reactjs

【解决方案1】：

假设可能有多个boardlist，您可以使用以下代码获取boardList：

const { boardList } = {...this.props.storyboard}

然后你可以通过循环板列表来获取widgetList。

以下是获取小部件的示例；

const { boardList } = {...this.props.storyboard}
const boards = boardList.map(function (board) {
  return board.widgetList.map(widget => Object.assign(widget, {boardId: board.boardId}))
})

【讨论】：

嗨 Rinkesh，我可以获取类似{boardId: 'c428148c-0f31-48d5-87a2-bf7a3eb7c3db',widgetId: '4015e24a-aac6-4480-8cb4-a1b72c4cc5ff', 小部件名称: 'Venn' 的数据吗, widgetType: 'venn', leftTarget: '',rightTarget: '',leftTargetValue: 0, rightTargetValue: 0 }
是的。由于您在内部地图功能中拥有小部件对象，因此您可以获得该对象的所有详细信息。比如widget.leftTargetwidget.rightTarget等等。
通过使用 boardDom 我没有得到预期的结果
请查看更新后的代码。它会根据您之前的评论返回对象。

【解决方案2】：

使用 JSON.stringify 通过属性将其作为字符串传递，然后在组件内部使用。最好的方法是使用 redux 存储 json，然后通过 react-redux 中的 connect() 方法使用它。

【讨论】：

我从 redux 获得的数据只有我需要渲染数据
在我使用 this.states.widgets(local state) 之前，现在需要使用 this.props。那个json数据