react-native网络请求fetch

矫情吗；* 2022-05-22 10:12 217阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![70][]

代码示例

import React from 'react';
    import {View,Text,Button} from 'react-native';
    
    export default class NetworkRequest extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {
          //key : value
          message:""
        };
        this.datalist = []
      }
    
      componentDidMount() {
        console.log("componentDidMount");
    
         loadDataFetch(this)
      }
    
      render(){
        return(
          <View style={
       {marginTop:60}}>
            <Text style={
       {margin:10,height:40}}>网络请求功能</Text>
            <Button title='请求数据' onPress={() => {loadDataFetch(this)}} />
            <Text style={
       {margin:10,height:40}}>请求信息：{this.state.message}</Text>
          </View>
        )
      }
    }
    
    const loadDataFetch = (that) => {
        fetch('https://www.apiopen.top/satinApi?type=1&page=1').then(
          (response) => response.json()
        ).then(
          (responseJson) => {
            that.datalist = []
            console.log("responseJson：" + responseJson);
            that.datalist = that.datalist.concat(responseJson.data);
            console.log("datalist: " + that.datalist);
            console.log("datalist object: " + that.datalist[0]);
            for (key in that.datalist[0]){
              console.log("datalist object: key = " + key + ", value = " + that.datalist[0][key]);
            }
            that.setState({
              message:that.datalist[0]['text']
            })
          }
        ).catch(
          (error) => {
            console.log("错误：" + error);
          }
        );
    }

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[70]: /images/20220522/e79e31ae5a924c78b4b9b87003ebaaa2.png