美文网首页
Fetch解析

Fetch解析

作者: 理想三旬_d066 | 来源:发表于2018-11-07 19:44 被阅读0次

import React, { Component } from "react";

import { View, Text, FlatList, Image } from "react-native";

export default class FetchListDemo extends Component {

  constructor(props) {

    super(props);

    this.state = {

      arr: []

    };

  }

  componentDidMount() {

    fetch(

      "https://api.yunxuekeji.cn/yunxue_app_api/content/getData/30/66597/1/10/"

    )

      .then(response => response.json())

      .then(responseJson => {

        this.setState({

          arr: responseJson.body.result

        });

      })

      .catch(error => {

        console.warn(error);

      });

  }

  render() {

    return (

      <View>

        <FlatList

          data={this.state.arr}

          renderItem={({ item }) => (

            <View>

              <Text>{item.TeacherName}</Text>

              <Text>{item.ID}</Text>

              <Text>{item.Title}</Text>

              <Image

                style={{ width: 60, height: 60 }}

                source={{ uri: item.TeacherPic }}

              />

            </View>

          )}

        />

      </View>

    );

  }

}

相关文章

网友评论

      本文标题:Fetch解析

      本文链接:https://www.haomeiwen.com/subject/kshbxqtx.html