Javascript 为什么键是空的？尽管我创建了它

我使用自定义组件在数组中创建了一个列表，它工作正常，但不正常，因为我尝试在组件实现中发送一个“key”prop，但在组件内部，key prop不存在，只是未定义

预期的行为是访问组件内的“键”道具，并避免在我的应用程序上出现“键不是道具”警告

这是数据

            data: [
                { key: 1, definition: "Def 1", example: "Example text 1" },
                { key: 2, definition: "Def 2", example: "Example text 2" },
                { key: 3, definition: "Def 3", example: "Example text 3" }
            ]

这是组件实现

createDefinitions = (data) => {
    return data.map((item, index) => {
        return <Definition {...item}/>
    })
}

createDefinitions=（数据）=>{
返回数据.map（（项目，索引）=>{
返回
})
}

“项”是前一个数组中每个重复的对象。实际上，我试图在这一点上直接添加“关键”道具，但结果是一样的

在自定义组件中，我试图打印props对象，但“key”不存在

<Text>{JSON.stringify(props)}</Text>

{JSON.stringify（props）}

你可以在这里输入代码

预期的行为是在自定义组件内获取键属性

---

谢谢

您正在通过映射数据来创建元素列表，在这种情况下，您需要向每个列表元素添加一个

键

属性（带有字符串值）。这与您正在使用的数据对象完全无关，但您可以使用该键作为属性值。因此，在这种情况下，您需要在定义中添加一个

键

道具：

createDefinitions = (data) => {
  return data.map((item, index) => {
    return <Definition key={item.key.toString()} {...item}/>
  })
}

createDefinitions=（数据）=>{
返回数据.map（（项目，索引）=>{
返回
})
}

---

或者，如果您的数据中没有唯一的键，您也可以使用索引

您正在通过映射数据来创建元素列表，在这种情况下，您需要向每个列表元素添加一个

键

属性（带有字符串值）。这与您正在使用的数据对象完全无关，但您可以使用该键作为属性值。因此，在这种情况下，您需要在定义中添加一个

键

道具：

createDefinitions = (data) => {
  return data.map((item, index) => {
    return <Definition key={item.key.toString()} {...item}/>
  })
}

createDefinitions=（数据）=>{
返回数据.map（（项目，索引）=>{
返回
})
}

---

或者，如果数据中没有唯一键，也可以使用索引

tl；dr您无法通过

此.props.key

访问

键。如果需要为
键设置的值
请通过另一个名称（如
id
）传递该值


设置密钥属性后，您无法通过道具访问该属性。如果您试图访问它，您将得到以下黄色警告


警告：%s:
键
不是道具。试图访问它将导致
正在返回未定义的

。如果需要访问相同的值 在子组件中，应将其作为其他道具传递。

我使用了链接解析为的实际url，因此抱怨使用了缩短的url

以下警告中的链接将显示以下消息：

但是，JSX元素上的大多数道具都会传递给组件， React使用两种特殊道具（ref和key），以及 因此不会转发到组件

然后，它会告诉您，如果需要访问该值，则应将其设置为不同的道具

例如，试图从组件访问this.props.key （即渲染函数或PropType）未定义。如果你需要 要访问子组件中的相同值，应传递 将其视为不同的道具（例如：

）。虽然这似乎是多余的，但重要的是 将应用程序逻辑与协调提示分开

---

看看你的代码，它运行得很好，唯一的问题是你试图访问的密钥不是通过道具传递的。如果在

定义
组件中删除对
props.key
的引用，则警告应消失。
tl；dr您无法通过
此.props.key
访问
键。如果需要为
键设置的值
请通过另一个名称（如
id
）传递该值


设置密钥属性后，您无法通过道具访问该属性。如果您试图访问它，您将得到以下黄色警告


警告：%s:
键
不是道具。试图访问它将导致
正在返回未定义的
。如果需要访问相同的值
在子组件中，应将其作为其他道具传递。

我使用了链接解析为的实际url，因此抱怨使用了缩短的url

以下警告中的链接将显示以下消息：

但是，JSX元素上的大多数道具都会传递给组件，
React使用两种特殊道具（ref和key），以及
因此不会转发到组件

然后，它会告诉您，如果需要访问该值，则应将其设置为不同的道具

例如，试图从组件访问this.props.key
（即渲染函数或PropType）未定义。如果你需要
要访问子组件中的相同值，应传递
将其视为不同的道具（例如：
）。虽然这似乎是多余的，但重要的是
将应用程序逻辑与协调提示分开

看看你的代码，它运行得很好，唯一的问题是你试图访问的密钥不是通过道具传递的。如果在
定义
组件中删除对
props.key
的引用，则警告应消失。
您发布的代码与此处的代码不同，并且看起来可以使用，您需要使用this.props或this.state，具体取决于您是否要访问作为props传递的状态，其他一些道具或本地状态您发布的代码与此处的代码不一样，看起来可以使用，您需要使用this.props或this.state，具体取决于您是否要访问已传递的状态