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

Question

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

预期的行为是访问组件内的“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' 属性，结果是一样的。

在自定义组件中，我尝试打印 props 对象，但 'key' 不存在

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

您可以在这里输入代码https://snack.expo.io/r1VE3DiQV

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

谢谢！

Answer 1

tl;dr您无法通过this.props.key 访问key。如果您需要为 key 设置的值，请​​通过不同的名称（例如 id）传递它。

---

设置后，您无法通过 props 访问 key 属性。如果您尝试访问它，您将收到以下黄色警告

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

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

点击警告中的链接会给您以下消息：

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

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

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

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

Answer 2

您正在通过映射数据来创建元素列表，在这种情况下，您需要为每个列表元素添加 key 属性（带有字符串值）。这与您正在使用的数据对象完全无关，但您可以将该键用作道具值。所以在这种情况下，你需要在定义中添加一个key 属性：

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

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