React - 如何映射嵌套对象值？

Question

我只是想映射状态对象内部的嵌套值。数据结构如下所示：

我想映射每个里程碑名称，然后映射该里程碑内的所有任务。现在我正在尝试使用嵌套地图函数来这样做，但我不确定我是否可以这样做。

渲染方法如下所示：

 render() {
    return(
      <div>
        {Object.keys(this.state.dataGoal).map( key => {
            return <div key={key}>>

                     <header className="header">
                       <h1>{this.state.dataGoal[key].name}</h1>
                     </header>
                     <Wave />

                     <main className="content">
                       <p>{this.state.dataGoal[key].description}</p>

                         {Object.keys(this.state.dataGoal[key].milestones).map( (milestone, innerIndex) => {
                             return <div key={milestone}>
                                      {milestone}
                                      <p>Index: {innerIndex}</p>
                                    </div>
                         })}
                     </main>

                   </div>
        })}
      </div>
    );
  }

我认为我可以通过将内部索引传递给这行代码以某种方式实现该结果： {Object.keys(this.state.dataGoal[key].milestones) 所以它看起来像： {Object.keys(this.state.dataGoal[key].milestones[innerIndex]) 。

但我不确定如何将 innerIndex 向上传递。我还尝试通过 {milestone.name} 获取里程碑名称 --- 但这也不起作用。我想那是因为我必须指定密钥。

有人有想法吗？或者我应该以完全不同的方式映射整个对象吗？

很高兴有任何帮助，雅库布

原文由 Jakub Kašpar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用嵌套映射映射里程碑，然后映射任务数组：

  render() {
  return (
    <div>
      {Object.keys(this.state.dataGoal.milestones).map((milestone) => {
        return (
          <div>
            {this.state.dataGoal.milestones[milestone].tasks.map((task, idx) => {
              return (
              //whatever you wish to do with the task item
              )
            })}
          </div>
        )
     })}
    </div>
  )
}

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你想要的是 flatMap 。 flatMap 采用一个数组和一个将应用于数组中每个元素的函数，您可以使用它（例如）访问数组中每个对象内的属性。然后它返回一个新数组，其中包含其 lambda 的返回值：

 function flatMap(arr, lambda) {
  return Array.prototype.concat.apply([], arr.map(lambda))
}

在我们的例子中，我们没有数组，我们有一个对象，所以我们不能直接使用 flatMap 。我们可以使用 Object.values 将对象转换为其属性值的数组，然后创建一个使用传递的键访问对象的函数：

 function tasksFromDataGoal(key) {
  return flatMap(Object.values(dataGoal[key].milestones), milestone => milestone.tasks)
}

工作示例：

 function flatMap(arr, lambda) {
  return Array.prototype.concat.apply([], arr.map(lambda))
}

function tasksFromDataGoal(key) {
  return flatMap(Object.values(dataGoal[key].milestones), milestone => milestone.tasks)
}

const dataGoal = { 123: { milestones: { milestone1: { tasks: ['a', 'b'] }, milestone2: { tasks: ['c', 'd'] } } } }

alert(tasksFromDataGoal('123'))

flatMap 的实现作者： https ://gist.github.com/samgiles/762ee337dff48623e729

原文由 fnune 发布，翻译遵循 CC BY-SA 3.0 许可协议