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

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>
  )
}

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 : flatMap

Answer 3

管理重構渲染方法：

 render() { return( <div> {Object.keys(this.state.dataGoal).map( (key, index) => { const newDataGoal = this.state.dataGoal[key].milestones; 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><br /><br /> {Object.keys(this.state.dataGoal[key].milestones).map( (milestoneKey) => { const milestonesData = this.state.dataGoal[key].milestones[milestoneKey]; return <div className="milestone-wrap" key={milestoneKey}> <label className="milestone-label">{milestonesData.name}</label> {Object.keys(milestonesData.tasks).map( (taskKey) => { return <div className="task clearfix" key={taskKey}> <input className="checkbox-rounded" name="task" type="checkbox" checked={milestonesData.tasks[taskKey].done} onChange={(e) => this.handleInputChange(e, key, taskKey)} /> <div className="task-content"> <p className="task-name">{milestonesData.tasks[taskKey].name}</p> <p className="task-date">{milestonesData.tasks[taskKey].finishDate}</p> </div> </div> })} </div> })} </main> </div> })} </div> ); }