错误的根本原因是什么： 类型错误： 无法读取未定义的属性'key'

Question

一个人可以在反应，角，反应中找到此错误类型。我能够找到带有此错误类型的很多问题，但是我很好奇控制台何时会丢弃此错误？

编辑：您能以以下对反应

的引用来解释我

export class EventList extends React.Component {
render() {
    return (
        <FlatList 
            data={[{key: 'a'},{key: 'b'}]}
            renderItem={({ itemObject }) => <Text>{itemObject.key}</Text>}
        />
    );
}
}

预先感谢：）

Answer 1

当父对象或数组为 undefined时，如果您调用 a.b或 a[b]，但是a是未定义的

Answer 2

当您尝试访问 key上的属性 CC_4时，发生错误。

这发生在您的renderItem功能中，因为该项目对象称为item而不是itemObject。更改为item，它将按预期工作。

export class EventList extends React.Component {
  render() {
    return (
      <FlatList
        data={[{ key: "a" }, { key: "b" }]}
        renderItem={({ item }) => <Text>{item.key}</Text>}
      />
    );
  }
}

Answer 3

问题在于您声明renderItem函数的方式。

您有：

render() {
    return (
        <FlatList 
            data={[{key: 'a'},{key: 'b'}]}
            renderItem={({ itemObject }) => <Text>{itemObject.key}</Text>}
        />
    );
}

特别是({ itemObject })的意思是"解构传递给renderItem的参数，然后从该参数提取属性itemObject"。

但是，RenderItem的签名是：

renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }) => ?React.Element

您可以看到传递的对象作为参数不包含itemObject，因此破坏它并提取itemObject将导致itemObject不确定。

您有2个选项：

做示例准确说明的要么：

       <FlatList 
            data={[{key: 'a'},{key: 'b'}]}
            renderItem={({ item }) => <Text>{item.key}</Text>}
        />

如果您坚持重命名默认成员，则可以执行：

       <FlatList 
            data={[{key: 'a'},{key: 'b'}]}
            renderItem={({ item: itemObject }) => <Text>{itemObject.key}</Text>}
        />