无法在反应原生中使用 axios 映射动态 json 数据以反应原生 swiper 滑块答案

【问题标题】：Unable to map dynamic json data to react native swiper slider using axios in react native无法在反应原生中使用 axios 映射动态 json 数据以反应原生 swiper 滑块
【发布时间】：2019-07-26 07:32:24
【问题描述】：

我想将图像 URL 动态传递给 react-native-swiper，但它给了我未定义的类型错误。我怎样才能让它充满活力？我是 react-native 的新手所以请帮助我并提前致谢。

我在 MacX 上使用 react native

import React, {Component} from 'react';
import {
    Text,
    View,
    Image,
    Dimensions
} from 'react-native';
import axios from 'axios';
import Swiper from 'react-native-swiper';
import { scale } from '../../assets/css/Scaling';
import {ROOT_URL} from '../../../get_connection';


const {width} = Dimensions.get('window');

const SliderImg = props => ( 

    <View style={styles.container}>
        <Image style={styles.image} source={{uri: props.uri}}/>
    </View>
);

const styles = {
    container: {
        flex: 1,
        justifyContent: 'center',

        paddingTop: scale(15),

    },
    image: {
        flex: 1,
        width,

    }

};

 class Slider extends Component {

    constructor(props){
        super(props)


        this.state = {
            imagesSlider: ["http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider.png","http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider1.png","http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider2.png"]
        }


    };

     componentDidMount(){
        this.getSliderContent();
   }
    getSliderContent() {
        // We're using axios instead of Fetch
        axios
          // The API we're requesting data from
          .get(`${ROOT_URL}/getSlider.php`)
          // Once we get a response, we'll map the API endpoints to our props
          .then(response =>
           response.data,

          )
          // Let's make sure to change the loading state to display the data
          .then(slides => {
            this.setState({
              slides: slides

            });

          })
          // We can still use the `.catch()` method since axios is promise-based
          .catch(error => console.log(error));
      }



    render (){

        return (
            console.log("slides state: "+this.state.slides),
            console.log("imagesSlider state: "+this.state.imagesSlider),
            <View style={{flex:1}}>
                <Swiper
                    autoplay
                    autoplayDelay={3}
                    height={240}
                    dotColor='#fff'
                    paginationStyle={{ bottom: scale(10) }} 
                    activeDotColor= '#0071bc'

                >

                {
                    this.state.slides.map((item, i) => <SliderImg 
                        uri={item}
                        key={i}
                    />)
                }


                </Swiper>
            </View>
        )
    }

};

export { Slider };

我希望获取幻灯片 URL 然后显示它，但是当我映射幻灯片数据时它会给出未定义的错误

这在控制台中显示：

【问题讨论】：

您可以通过 2 种方式做到这一点。 1. 在构造函数的 setState 中添加幻灯片：[] 或者您可以进行第二步。 2. {this.state.slides !== undefined && }

标签： reactjs react-native axios

【解决方案1】：

在第一次渲染时，您的函数试图对未定义的值执行map()，因为您没有在构造函数中定义它。您要么必须检查值是否作为数组存在，要么在构造函数中将其初始化为数组：

   constructor(props){
    super(props)
    this.state = {
        imagesSlider: ["http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider.png","http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider1.png","http://burgerhut1313.in/KaptureOne/admin/upload/slider_img/slider2.png"],
        slides:[]
    }
};

【讨论】：