react fetch 及 react 组件间数据的传输

fetch 是 XMLHttpRequest 的最新替代技术，它的主要方法就是 fetch() 方法。

相关资料：
fetch网址：阮一峰；http://javascript.ruanyifeng.com/bom/ajax.html#toc27
http://blog.csdn.net/u014410695/article/details/51017088

url ：http://blog.csdn.net/u014410695/article/details/51017088

在项目中使用：

home.js 是首页， 而 NavList 是轮播图的组件，现在要实现的就是在 home.js 中把首页的数据拿到并拆分出来，把轮播图这一块的数据传递给 NavList 组件， NavList 拿到数据并渲染。

1、home.js 拆分数据
一般数据拆分是写在 componentDidMount() 中，该方法是在 render() 方法成功调用并且真实的 dom 已经被渲染后进行。

componentDidMount() {
   /* var myHeaders = new Header();
    myHeaders.append("Content-Type", "text/plain");
    myHeaders.append("Content-Length", context.length.toString());
    myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

    var myInit = {
        method: 'POST',
        headers: myHeaders,
        mode: 'cors',
        cache: 'default'
    };  */   // 头部信息，解决兼容性问题

   var url = "................................."; // 接口url
   fetch(url).then(
        function (res) {
            if (res.ok) {
                return res.json()
            } else {
                {this.LogError(res)}
            }
        }
    ).then(function (json) {
        if (json.code == "200") {  // 判断请求是否正确
            return json.datas
        }
    }).then(function (datas) {
        for (var i=0; i<datas.length; i++) {
            if (datas[i].type == "adv_list") {  // 取出轮播图的数据
                return datas[i].ietm_data
            }
        }
    }).then( (e) => {
       console.log("props111=====" + e );
        this.setState({  // setState 将数据塞在 state 中以便在组件间进行数据传递
            slideList:e
        });

    });
}
  LogError(res) {
      console.error('服务器繁忙,请稍后重试; \r\nCode:' + res.status)
  }

2、数据传递

home.js 在 constructor 中初始化 slideList 数组，以便后续来承载需要传输给子组件的数据。

constructor(){
    super();
    this.state = {
        slideList:[],  // 初始化 slideList［］
    }
}

前面在第一步也讲到了，把数据 setState 到 slideList 中。

render() {
  return (
    <div>
        <Nav />
        <NavList  datas={this.state.slideList} />  // 在 render 数组的时候将数据传输进去
        <GridView />
    </div>
  );
}

3、子组件接收数据并渲染组件

NavList 中 继承父组件的 props：

constructor(props) {
    super(props);
    console.log("props=====" + props);  // 这里打印时已经确定数据传输过来了
    this.state = {   // 无关
        current: 1,
    };
};

渲染组件，我这里用的是 antd mobile 的轮播图：

render() {
    const settings = {
        //是否显示面板指示器
        dots: true,
        //是否自动切换
        autoplay: true,
        //是否循环播放
        infinite: true,
        //手动设置当前显示的索引
        selectedIndex: this.state.current,
        beforeChange: this.beforeSlide,
        afterChange: this.slideTo,
    };

    return (
        <div>
            <Carousel {...settings}>
                {
                    this.props.datas.map(function(el){  // map遍历 渲染
                        return <Flex
                            justify="center"
                            className={styles.flex}
                        >
                            <img className={styles.image} src={el.image} />
                        </Flex>
                    })
                }

            </Carousel>
            <WhiteSpace size="1g" />
        </div>
    );
}

ok，动态取值的轮播图就已经完成了。