0

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

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

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

           ]
 }
]

这就是如何将此对象数组作为我希望使用的道具传递

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>   
);
};

我怎样才能做到这一点？

4

2 回答 2

-1

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

{"name":"Michelle"}

之后的一个

{"price":"76"}
于 2018-01-28T19:49:34.960 回答
-1
  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 帮助程序包在您的代码中提供了正确的响应。

于 2018-01-31T23:10:04.950 回答