reactjs - React js在多个地图迭代中将对象传递给组件

Question

这些值没有到达 <Column 组件。console.log 行将正确的值打印到控制台。如果我删除外部映射迭代并用相同的内容填充变量，则值到达 <Column 组件，我可以像往常一样将这些值用作道具。这是为什么？

      <Container>

       {currentAdventure && currentAdventure.map((adventure, index) => {

        {this.state.columnOrder.map((columnId) => {
                const column = adventure.columns[columnId];
                const tasks = column.taskIds.map((taskId) => adventure.tasks[taskId]);
                  console.log("column.id: ", column.id);
                  console.log("tasks: ", tasks);
                  console.log("column: ", column);

              return <Column key={column.id} column={column} tasks={tasks} />;

              })}
        })}
      </Container>

标签： reactjsparameterscomponents

Answer 1

你应该回到里面currentAdventure && currentAdventure.map。将大括号{}改为括号()

<Container>

   {currentAdventure && currentAdventure.map((adventure, index) => {

    return this.state.columnOrder.map((columnId) => {
            const column = adventure.columns[columnId];
            const tasks = column.taskIds.map((taskId) => adventure.tasks[taskId]);
              console.log("column.id: ", column.id);
              console.log("tasks: ", tasks);
              console.log("column: ", column);

          return <Column key={column.id} column={column} tasks={tasks} />;

          })
   })}
</Container>