时间戳

首页 > 解决方案 > 为什么键为空？，尽管我创建了它

javascript - 为什么键为空？，尽管我创建了它

问题描述

我使用自定义组件创建了一个基于数组的列表，它可以工作，但不能正常工作，因为我确实尝试在组件实现中发送一个“关键”道具，但在组件内部，关键道具不存在，是只是未定义。

预期的行为是访问组件内的“key”道具，并避免在我的应用程序上出现“key is not a 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}/>
    })
}

'item' 是前一个数组中每个重复的对象。实际上，我尝试在这一点上直接添加 'key' 道具，但它是一样的。

在自定义组件中，我尝试打印道具对象，但“键”不存在

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

您可以在此处获取代码https://snack.expo.io/r1VE3DiQV

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

谢谢！

标签： javascriptreact-nativecomponentskey

解决方案

tl; dr您无法访问keyvia this.props.key。如果您需要key通过其他名称（例如id.

一旦你设置了它，你就不能通过 props 访问 key 属性。如果您尝试访问它，您将收到以下黄色警告

访问关键道具的黄框警告

警告：%s：key不是道具。尝试访问它将导致 undefined被退回。如果您需要在子组件中访问相同的值，则应将其作为不同的 prop 传递。 https://reactjs.org/warnings/special-props.html

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

按照警告中的链接，您会看到以下消息：

JSX 元素上的大多数 props 都会传递给组件，但是，有两个特殊的 props（ref和key）被 React 使用，因此不会转发给组件。

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

例如，未定义尝试从组件（即渲染函数或 propTypes）访问 this.props.key。如果您需要在子组件中访问相同的值，则应将其作为不同的 prop 传递（例如：） <ListItemWrapper key={result.id} id={result.id} />。虽然这似乎是多余的，但将应用程序逻辑与协调提示分开很重要。

查看您的代码，它工作正常，唯一的问题是您正在尝试访问未通过道具传递的密钥。props.key如果您删除Definition组件中对的引用，则应该发出警告。

推荐阅读