Как структурировать возвращаемые данные из API в React Native?

Question

Я использую React Native response-native-snap-carousel, который просто отображает карусель с изображением, заголовком и подзаголовком.Данные загружаются через статический файл:

export const ENTRIES2 = [
  {
      title: 'Favourites landscapes 1',
      subtitle: 'Lorem ipsum dolor sit amet',
      illustration: 'https://i.imgur.com/SsJmZ9jl.jpg'
  },
  {
      title: 'Favourites landscapes 2',
      subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
      illustration: 'https://i.imgur.com/5tj6S7Ol.jpg'
  }
]

У меня есть настройки для извлечения данных из API:

axios.get('http://192.168.1.1/test')
      .then(function (response) {
        console.log(response);
        console.log(response.data);
        this.isLoading = false;
      })
      .catch(function (error) {
        console.log(error);
        this.error = error
        this.isLoading = false;
      });

, как я могу использовать эти возвращенные данные для создания структурированного constпохожим на статический файл?

Спасибо

Answer 1

Посмотрев документацию о реактивной нативной привязке, вы можете видеть, что реквизиты "data" - это массив, смотрите ниже.

return (
     <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.entries} <-- it's a array
          renderItem={this._renderItem}
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
         />
 );

Итак, в вашем компоненте create будет получено состояниеданные из API.

state = {
    data: []
}

и использовать axios для извлечения данных в компонентеWillMount.

componentWillMount() {
   axios.get('http://192.168.1.1/test')
      .then(function (response) {
        console.log(response);
        console.log(response.data);

        this.setState({
            data: response.data
        }) 

        this.isLoading = false;
      })
      .catch(function (error) {
        console.log(error);
        this.error = error
        this.isLoading = false;
      });
}

Answer 2

Это довольно просто!Вы можете настроить свой объект так, как вам нужно.Я предполагаю, что response.data - это массив записей здесь, но вам придется изменить то, что использует ваш ответ.

axios.get('http://192.168.1.1/test')
  .then(function (response) {
    console.log(response.data);
    let data = []
    response.data.forEach(entry => {
      data.push({
        title: entry.title,
        subtitle: entry.subtitle
      })
    })
    this.isLoading = false
  })

Если этот метод используется в вашем компоненте (как в componentDidMount), вы можете использовать setState, чтобы добавить данные в ваше состояние и затем использовать их в вашем компоненте.

...
  subtitle: entry.subtitle
})
this.isLoading = false
this.setState({data})

Затем в вашем методе рендеринга:

render () {
  const {data} = state
  return(
    <FlatList
      data={data}
      renderItem={({item}) => <Text>{item.title}</Text>}
    />
  )
}

Ключ здесьсоздание массива элементов на основе того, что возвращает ваш вызов API, а затем сохранение их в состоянии компонента, к которому вы можете получить доступ для их рендеринга.