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

Question

我只是想在状态对象中映射嵌套值.数据结构如下所示:

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

render方法如下所示:

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

Answer 1

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

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