Question

我通过API向服务器发送了一个帖子请求，我以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: []
      };
  }

Thenafter，设置了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适用于数组。你的回答应该是这样的数组：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

li.active {
    display: block;
    color: red;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
li.dot {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
</style>

了解更多见解，请查看Flatlist

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

1 个答案: