时间戳

首页 > 解决方案 > 当我要将地图索引传递给我的组件时，对未定义参数的任何帮助

javascript - 当我要将地图索引传递给我的组件时，对未定义参数的任何帮助

问题描述

正如问题所述，我将在下面显示代码。

[An array].map((item, index) => {
    return <TreeItem key={index} id_index={index} ...other props are no problem />
})

function TreeItem(props) {
    ...
    console.log(props.id_index)
    ...
}

不知何故，在我的 TreeItem 函数中，我无法从 props.id_index 获取索引，而是 always undefined。

附加信息：我有两个基于函数的组件，一个即将加载 TreeItem 组件的树结构，TreeItem 组件也可以有自己的 TreeItem，所以我的想法是保留每个 TreeItem 的索引以供以后操作，我是令人困惑的是为什么 map 循环中的 TreeItem 可以获取所有道具甚至函数道具，但索引未定义。

非常感谢任何人都可以提供帮助，让我知道为什么会发生这个奇怪的问题，这让我很生气..

标签： javascriptreactjsundefinedarrow-functions

解决方案

通过将id_indexprop添加id_index="0"到 TreeItem 的父节点，它可以工作。我认为这是由于我的 TreeItem 函数包含所有参数，id_index因为我没有将道具值传递给父节点，然后导致内部地图循环问题，仍然混淆为什么内部地图需要将道具传递给父组件，如果我会发布详细信息找到原因或有人可以完全回答。

<TreeItem nodeId="1" labelText="A" labelIcon={Label} id="1" cb={refresh} id_index="0" parentId="1">
  {
     mapper["1"].map((item, index) => {
          return <StyledTreeItem key={index} nodeId={item.id} labelText={item.text} labelIcon={Label} id={item.id} cb={refresh} id_index={index} parentId="1" />
     })
  }  
</TreeItem>

推荐阅读