将 JSON 格式响应显示到 React-Native

Question

我通过 API 向服务器发送了一个 post 请求，我收到了以下 JSON 格式的响应（console.log 屏幕截图）：

执行以下代码后，我能够在警报对话框中显示响应：

uploadPhoto() {
  RNFetchBlob.fetch('POST', 'http://192.168.1.102:8000/api/v1/reader/', {
    Authorization: 'Bearer access-token',
    otherHeader: 'foo',
    'Content-Type': 'multipart/form-data',
  }, [
    { name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
  ]).then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             jsonData: responseJson
           }, () => {
             Alert.alert(" Vehicle Number Plate:  " + responseJson.processed_text);
            console.log(responseJson);
           });
         })
         .catch((error) => {
           console.error(error);
         });
}
<TouchableOpacity
 style={styles.buttonStyle} 
 onPress={this.uploadPhoto.bind(this)}>
<Text style={styles.btnTextStyle}> Process Image</Text>
</TouchableOpacity>

但是，由于我是 React-Native 开发的新手，所以除了在警告对话框中，我无法在应用程序中显示 JSON 数据。以下是我的代码：

正在通过构造函数初始化jsonData对象的状态：

constructor() {
      super();
      this.state = {
        imageSource: null,
        data: null,
        jsonData: []
      };
  }

然后，设置jsonData对象的状态（详细：上面的代码片段）：

.then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             jsonData: responseJson
           }

最后，我使用组件 FlatList 来显示数据：

<View>
   <Text>Display Response JSON Data</Text>
   <FlatList
   data={this.state.jsonData}
   renderItem={({ item }) => <Text> {item.processed_text } </Text>}
   />
</View>

但是，我看不到输出！我该如何解决这个问题？

Answer 1

Flatlist 适用于数组。您的响应应该是这样的数组：

[
 { processed_text: 'value1', owner: { fullname: 'alex' } },
 { processed_text: 'value2', owner: { fullname: 'john' } },
]

如需更多见解，请查看 Flatlist

将 JSON 格式响应显示到 React-Native

Displaying JSON format response into React-Native

json

react-native

react-native-android

react-native-flatlist

react-native-listview