如何从api中获取数据并设置为图像滑块？

Question

我是新来的反应，我正在努力使形象粉碎机。我试图从api中获取数据，并将其设置为imageslider。我必须从api中获取图像标记，并将其设置为imageslider.My api，如下所示：

[ 
 { 
   "title":"Taylor Swift",
    "artist":"Taylor Swift",
    "url":"https://www.amazon.com/Taylor-Swift/dp/B0014I4KH6",
   "image":"https://images-na.ssl-images-amazon.com/images/I/61McsadO1OL.jpg",
   "thumbnail_image":"https://i.imgur.com/K3KJ3w4h.jpg"
},
{ 
   "title":"Fearless",
   "artist":"Taylor Swift",
   "url":"https://www.amazon.com/Fearless-Enhanced-Taylor-Swift/dp/B001EYGOEM",
   "image":"https://images-na.ssl-images-amazon.com/images/I/51qmhXWZBxL.jpg",
   "thumbnail_image":"https://i.imgur.com/K3KJ3w4h.jpg"
 }
 ]

我无法从api中获取图像数据并在呈现函数中呈现它。我所执行的措施如下：

export default class ViewpagerP extends Component {

constructor(props) {
    super(props);
    this.state = { isLoading: true, images: [], data: [] }
}
componentDidMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(response =>response.json())
        .then((data)=>{for (let index = 0; index < data.length; index++) {
            this.setState({
                isLoading: false,
                data: data[index]
            }) 
        }})    
}
render() {
    const { images } = this.state;
    return (
        <View style={styles.container}>
            <ImageSlider style={styles.viewPagerStyle}
                loopBothSides
                autoPlayWithInterval={1000}
                images={images}
                customSlide={({ index, item, style, width }) => (
                    <View key={index} style={style}>
                        <Image source={{ uri: item }} style={styles.customImage} />
                    </View>

                )}
            />
        </View>
    )
}
}

Answer 1

我解决了

 componentDidMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then((response => this.setState({
            isLoading: false,
            data: response.data,
        }))
        )
      }

并在渲染中

  if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, padding: 20 }}>
                    <ActivityIndicator />    
                </View>
            )
        }
        console.log(this.state.data)
    return (
        <View style={styles.container}>
            <ImageSlider style={styles.viewPagerStyle}
                loopBothSides
                autoPlayWithInterval={6000}
                images={this.state.data}
                customSlide={({ index, item, style, width }) => (
                    <View key={index} style={[style]}>
                        <Image source={{ uri: item.image }} style={styles.customImage} />
                    </View>

                )}
            />
        </View>
    );
}

Answer 2

使用下面的代码，它将工作，因为您忘记添加数据状态到您的图像滑块库，这就是为什么您没有得到您想要的结果。

export default class ViewpagerP extends Component {

  constructor(props) {
    super(props);
    this.state = { isLoading: true, images: [], data: [] }
  }
  componentDidMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
      .then(response => response.json())

      .then((responseJson) => {
        this.setState({
            isLoading: false,
            data: responseJson
        })
      })

  }
  render() {
    return (
      <View style={styles.container}>
        <ImageSlider style={styles.viewPagerStyle}
          loopBothSides
          autoPlayWithInterval={1000}
          images={this.state.data}
          customSlide={({ index, item, style, width }) => (
            <View key={index} style={style}>
              <Image source={{ uri: item.image }} style={styles.customImage} />
            </View>

          )}
        />
      </View>
    );
  }
}

Answer 3

由于您已经拥有状态的images，所以只使用它。

.then((data)=>{
        this.setState({
            isLoading: false,
            images:data
        }) 
    })  

现在您在this.state.images中有了响应，所以只需要在customSlide中做一个更改

customSlide={({ index, item, style, width }) => (
            <View key={index} style={style}>
                <Image source={{ uri: item.image }} style={styles.customImage} />
            </View>
)}

item将为您提供从该元素中提取image所需的整个节点，因此我们将编写item.image