Question

可以在React，Angular，React-Native中找到这种错误类型。我能够找到很多与此错误类型有关的问题，但我很好奇控制台何时会引发此错误？

编辑： 您能否通过以下对react-native的引用来解释我

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上的属性undefined时发生错误。

这是在您的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”。

但是the signature of 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>}
        />

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

3 个答案: