通过 React Native 显示 JSON 数据 - json 数组

Question

我正在尝试进行 API 调用以获取一些 JSON 数据并将其显示在我的 React Native 应用程序中，但它不会将数据显示到实际应用程序中。我知道调用可以工作，因为我成功调用它并将其记录到控制台，并且我看到了日志 - 我只是无法让它显示在我的代码的 ReactNative 部分。

我认为这可能与 JSON 数据中有一个数组有关，我不确定如何解析它。这就是我的 JSON 的样子：

{"resultCode":0,"message":"[{\"id\":0000000,\"entityType\":\"NONE\",,\"namePrefix\":\"\",\"nameFirst\":\"\",\"nameMiddle\":\"\",\"nameLast\":\Doe\",\"nameSuffix\":\"\",\"address1\":\"1234 TEST ST\",\"address2\":\"\",\"city\":\"CUPERTINO\",\"state\":\"CA\",\"zip\":\"11111\",\"country\":\"US\",\"physicalAddress1\":\"1234 TEST ST\",\"phoneNumbers\":[],\"addresses\":[],\"email1\":\"goldtreeapparel@gmail.com\",\"gender\":\"EMPTY\",\"dob\":\"Oct 24, 2016, 12:00:00 AM\",\"occupation\":\"\",\"createdTimestamp\":\"Aug 26, 2019, 9:55:24 PM\",\"modifiedTimestamp\":\"Aug 26, 2019, 9:55:24 PM\"}]"}

基本上有两个字段resultcode和message，但在message里面是一个更多JSON数据的数组。我知道这很丑，但这只是一个测试，这是我必须使用的。

我的 React Native 代码如下：

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

export default class App extends React.Component {
    constructor( props: {} ) {
    super(props);

     this.state = {
         isLoading: true,
         dataSource: []
     };
 }

 componentDidMount() {
     fetch("https://mytestapi.com/test.json")
     .then((response) => response.json())
     .then((responseJson) => {
         this.setState({
             isLoading: false,
             dataSource: responseJson
         });
     });
 }

 renderItem = ({item, index}) => {
     let { resultCode, message } = item;

     if (!message[0]) return null;
     let details = message[0];

     return (
         <View style={styles.container}>
             <Text style={styles.header}>Entity ID: {details.entityId}</Text>
         </View>
     );
 }

 keyExtractor = (item, index) => {
     return index.toString();
 }

 render() {
     return (
         <View style={{flex: 1}}>
             <FlatList
                 data={this.state.dataSource}
                 keyExtractor={this.keyExtractor}
                 renderItem={this.renderItem}
             />
         </View>
     );
 }
}

const style = StyleSheet.create({
  container: {
      paddingTop: 45,
      backgroundColor: '#F5FCFF',
  },
  header: {
      fontSize: 25,
      textAlign: 'center',
      margin: 10,
     fontWeight: 'bold'
  },
});

const fetchAndLog = async() => {
   const response = await fetch("https://my.testapi.com/test.json");
   const json     = await response.json();
   console.log(json);
}

fetchAndLog();

我知道调用成功，因为 fetchAndLog 函数成功登录到控制台，所以我只是在代码的 React Native 部分中显示 JSON 数据时遇到问题。我尝试更改我的代码几次，但似乎无法让它打印出 JSON 的 message 部分，我使用 this answer 和 this answer 来尝试提供帮助。

有什么建议吗？

编辑：这是我尝试在应用中查看时遇到的错误：

Invariant Violation: Tried to get frame for out of range index NaN

This error is located at:
  in VirtualizedList (at FlatList.js:632)
  in FlatList (at App.js:45)
  in RCTView (at View.js:45)
  in View (at App.js:44)
  in App (at withExpoRoot.js:20)
  in RootErrorBoundary (at withExpoRoot.js:19)
  in ExpoRootComponent (at renderAPplication.js:35)
  in RCTView (at View.js:45)
  in View (at AppContainer.js:98)
  in RCTView (at View.js:45)
  in View (at AppContainer.js:115)
  in AppContainer (at renderApplication.js:34)

Answer 1

消息是否始终存在？回来时数据是否存在？我会添加更多检查：

 componentDidMount() {
   fetch("https://mytestapi.com/test.json")
   .then((response) => response.json())
   .then((responseJson) => {
     this.setState({
         isLoading: false,
         dataSource: responseJson || []
     });
  });
}

renderItem = ({item, index}) => {
     let { resultCode, message } = item;

     if (message == null || !message[0]) return null;
     let details = message[0];

     return (
         <View style={styles.container}>
             <Text style={styles.header}>Entity ID: {details.entityId}</Text>
         </View>
     );
 }

Answer 2

看起来您正在传递一个对象作为 FlatList 数据源，但您应该传递一个数组。

试试：

<FlatList
     data={this.state.dataSource.message}
     keyExtractor={this.keyExtractor}
     renderItem={this.renderItem}
/>

...

renderItem = ({item, index}) => {

     return (
         <View style={styles.container}>
             <Text style={styles.header}>Entity ID: {item.id}</Text>
         </View>
     );
 }

如果您不打算显示数据数组，则应该使用 FlatList 之外的其他东西。此外，我在该数据的任何地方都没有看到名为 entityId 的字段。