无法读取未定义的属性'propertyName'

Question

我正在使用react-native中的一个项目，我在访问对象数组中的元素时遇到了麻烦，方法是将它作为我希望它使用的prop。要求是获取name属性并将其设置为flatlist中的文本。

我的对象数组的结构如下。

[
 { 
  "media1":[ 
            {"name":"Lynn"},
            {"name":"Michelle"},
            {"name":"Carter"}
           ]
 },
 { 
  "media2":[ 
            {"price":"23"},
            {"price":"76"},
            {"price":"39"}

           ]
 }
]

这是如何将此对象数组作为我希望它使用的prop

return (
        <View>
           <AlbumDetail data = {this.state.allData}/>
        </View>
    );

这是我希望它被使用的地方

 const AlbumDetail = (props) => {
 return (

 <View>
    {console.log(props.data[0])} //Working
    {console.log(props.data[0].media1[0].name)} //Not working

    // Requirement as bellow
    <Text>{wants to set the "name" here}</Text> 
    <Text>{wants to set the "price" here}</Text> 
 </View>   
);
};

我怎么能实现这个？

Answer 1

您可能想要放置两个缺少的逗号。一个后：

{"name":"Michelle"}

一个之后

{"price":"76"}

Answer 2

1. AlbumDetail无法知道它有一个名为data的属性。您需要将AlbumDetail函数编写为React.Component类。
2. 您正在将JSON对象传递给AlbumDetail，您需要在使用之前调用JSON.parse（data）。更新：.then(resp => resp.json())用于解析json。
3. 在返回之前放置console.log。您返回的对象应该是纯JSX组件。

以下代码可以解决您的问题：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const url =
  'http://purelight-prod.appspot.com/api/user/v2/browse/homescreendata';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
    };
  }
  componentDidMount() {
    fetch(url)
      .then(resp => resp.json())
      .then(respJson => {
        this.setState({
          data: respJson,
        });
      })
      .catch(err => {
        console.error(err);
      });
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <TestView data={this.state.data} />
      </View>
    );
  }
}

class TestView extends React.Component {
  render() {
    !!this.props.data && console.log(console.log(data[0].healer[0].healerid));
    return (
      <View>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

编辑：

使用componentDidMount()，因为我们喜欢显示某些内容（加载图标等），然后在数据到达时更新View。

这是一个异步任务。数据必须保留到它到达。我使用!!this.props.data && ...，因此只有在未定义时才会显示。

由于API响应是一个相对较大的包，因此如果使用TypeScript并创建一个对象类来解析它，它将更容易使用。

我不认为API帮助程序包在代码中提供正确的响应。