Question

我正在使用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.log(response);
        console.log(response.data);
        this.isLoading = false;
      })
      .catch(function (error) {
        console.log(error);
        this.error = error
        this.isLoading = false;
      });

如何使用此返回的数据以类似于静态文件的方式创建const结构？

由于

Answer 1

这很简单！您可以设置对象，但需要这样设置。我假设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调用返回的内容创建元素数组，然后将它们保存到组件的状态中，您可以访问它们来呈现它们。

Answer 2

查看react-native-snap-carousel文档，您可以看到prop＆＃34;数据＆＃34;是一个数组，看下面。

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

因此，在您的组件中创建一个状态将从api接收数据。

state = {
    data: []
}

使用axios检索componentWillMount中的数据。

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;
      });
}

如何在React Native中从api构造返回的数据？

2 个答案: