Как структурировать возвращаемые данные из api в React Native?
Я использую React Native, react-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'
}
]
У меня есть настройки axios для извлечения данных из api:
axios.get('http://192.168.1.1/test')
.then(function (response) {
console.info(response);
console.info(response.data);
this.isLoading = false;
})
.catch(function (error) {
console.info(error);
this.error = error
this.isLoading = false;
});
как я могу использовать эти возвращенные данные для создания константы, структурированной аналогично статическому файлу?
Спасибо
Какова форма данных, возвращаемых API? Каков результат ответа?
Ответы 2
Это очень просто! Вы можете настроить свой объект так, как вам нужно. Я предполагаю, что response.data - это массив записей, но вам придется изменить все, что используется в вашем ответе.
axios.get('http://192.168.1.1/test')
.then(function (response) {
console.info(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, а затем сохранение их в состоянии компонента, к которому вы можете получить доступ для их рендеринга.
При построении нового массива из существующего используйте map().
Просматривая документацию response-native-snap-carousel, вы можете увидеть, что свойство «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 для получения данных в componentWillMount.
componentWillMount() {
axios.get('http://192.168.1.1/test')
.then(function (response) {
console.info(response);
console.info(response.data);
this.setState({
data: response.data
})
this.isLoading = false;
})
.catch(function (error) {
console.info(error);
this.error = error
this.isLoading = false;
});
}
Что вы подразумеваете под «константной структурой»? Вы имеете в виду государство?