Отображение ответа в формате JSON в React-Native

Я отправил почтовый запрос на сервер через API, на что получил следующий ответ в формате JSON (скриншот console.log):

Получен ответ от сервера в формате 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>

Однако я не могу увидеть результат! Как я могу решить эту проблему?


person Sarun Dahal    schedule 28.03.2018    source источник
comment
Попробуйте поместить console.log внутрь себя и напечатать то, что на самом деле видит ваш компонент. Или переопределите componentDidUpdate(prevProps, prevState) и напечатайте переменные   -  person nicecatch    schedule 28.03.2018
comment
@Sarun, это поможет нам, если вы поместите console.log(responseJson) под этой строкой .then((responseJson).   -  person Francis Rodrigues    schedule 28.03.2018
comment
...или мне нужно что-то получше, чем выборка. Попробуйте использовать axios. github.com/axios/axios   -  person Francis Rodrigues    schedule 28.03.2018
comment
Компонент FlatList ожидает массив. Я предполагаю, что ваш ответ является объектом, а не массивом   -  person bennygenel    schedule 28.03.2018


Ответы (1)


Flatlist работает с массивами. Ваш ответ должен быть таким массивом:

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

для получения дополнительной информации см. Flatlist

person Muhammad Shoaib Riaz    schedule 15.05.2018