Question

我使用自定义组件在基于数组的列表中创建了一个列表，该列表有效，但无法正常运行，因为我确实尝试在组件实现中发送“ key”属性，但在组件内部，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}/>
    })
}

'item'是一个对象，每个对象在前一个数组中都有。实际上，在这一点上，我尝试直接添加“关键”道具，但这是相同的。

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

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

您可以在此处https://snack.expo.io/r1VE3DiQV

进行编码

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

谢谢！

Answer 1

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

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

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

我已经使用了链接解析为的实际网址，因为SO抱怨使用缩短的网址

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

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

然后继续告诉您，如果您需要访问该值，则应将其设置为其他属性。

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

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

Answer 2

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

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

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

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

2 个答案: