Question

React Native 错误：将数据传递给组件时未定义不是对象

2022-08-01

773

javascript reactjs react-native

当我使用 props 将数据传递给我的组件并尝试从那里访问它时，我收到一个错误。我的数据格式如下

export const data = [
  {
    id: 0,
    title: 'Test',
    price: 1500,

  },
];

我导入它并通过 props 传递数据，如下所示：

const post0 = data[0];
...
<Post post={post0}/>

在我的组件中，我成功接收了数据，我可以通过类似 console.log(props); 的日志进行验证，并获取以下日志条目

{"post": {"id": "0", "price": "1500", "title": "Test"}}

当我现在尝试访问组件中的某个属性（如 id）时

<Text> { props.post.id } </Text>

我收到错误“TypeError：undefined 不是对象（评估'props.post.title'）”

如何在我的组件中使用数据？我假设我必须以某种方式映射数据，但无法解析它。

Answer 1

您的组件是基于类的组件还是功能组件？如果它是基于类的组件，则应使用“this”关键字访问您的 props。例如

export class Post extends React.Component {
  render() {
    return (
     <View>
      <Text>{this.props.post.id}</Text>
      <Text>{this.props.post.title}</Text>
     </View>
    )
  }

}

如果它是功能组件，则可以直接访问 props。例如：

export function Post(props) {
  return (
    <View>
      <Text>{props.post.id}</Text>
      <Text>{props.post.title}</Text>
    </View>
  )
}

Answer 2

我自己发现了这个问题。我第二次在代码中使用了 post 组件，没有任何 props，因此它确实是未定义的。当始终将对象传递给组件时，获取 {post.id} 等对象属性非常有效。