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

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

我认为这可能与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本机代码如下所示：

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

---

信息总是存在吗？返回时数据是否存在？我想再加上几张支票：

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

componentDidMount（）{
取回（“https://mytestapi.com/test.json")
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据源：responseJson | |【】
});
});
}
renderItem=（{item，index}）=>{
让{resultCode，message}=item；
if（message==null | |！message[0]）返回null；
let details=消息[0]；
返回(
实体ID:{details.entityId}
);
}

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

尝试：

...
renderItem=（{item，index}）=>{
返回(
实体ID:{item.ID}
);
}

---

如果您不打算显示一个数据数组，那么应该使用FlatList之外的东西。另外，我在数据中的任何地方都没有看到名为

entityId

的字段。

尝试简化渲染函数，只显示结果代码。另外，我担心这段代码会把整个事情搞砸：

if（！message[0]）返回null我上面的评论的意思是，我不确定您是否应该返回null。试着在那里返回一个组件。返回
null
对于组件来说是有效的。我之所以将其设置为平面列表，唯一的原因是因为我在JSON中有一个数组——我可以将平面列表更改为文本吗？如果您只想显示一个字段（而不是数组），那么您只需要一个
Text
。嗯，您的修复程序让我更进一步，它不再给我一个错误，但屏幕上没有显示任何内容…我可以将我的返回语句从
renderItem
移到
render
函数中吗？是的，但代码类似于
实体Id:{this.state.dataSource.message.Id}
抓取它开始工作！非常感谢！我得到上述错误是因为我的渲染函数中有/**/注释，而您不能有。但你的解决方案奏效了！
 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>
     );
 }

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