Question

大家好，我是这个平台的初学者。任何人都可以帮助我解决我在以下代码中出错的地方吗？
我正在使用 SQL 服务器作为数据库在 App.js 中，我尝试了以下代码...

 import React, { Component } from 'react';
        import {
      StyleSheet,
      View,
      ActivityIndicator,
      TouchableOpacity,
      Text,
      Dimensions,
      FlatList
    } from 'react-native';


    export default class App extends React.Component {
      //Set States
      constructor(props)
      {
    super(props);
    this.state={
      isLoading: true,
      dataSource: []
    }
  }
  //Get Data From API
  componentDidMount()
  {
    fetch('http://localhost:7483/api/StudentData/')
    .then((response)=>response.json())
    .then((responseJson)=>{
      this.state({
        isLoading: false,
        dataSource: responseJson
      })
    })
  }

  _renderItem=({item,index}) => {
    return(
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
  render()
  {
    let {container}=styles
    let {dataSource,isLoading}=this.state
    //Use FlatList for Display Data
    return(
      <View style={container}>
        <FlatList
          data={dataSource}
          renderItem={this._renderItem}
          keyExtractor={(item,index) => index.toString()}
        />
      </View>
    );
  } 
}


const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  welcome:{
    fontSize:20,
    textAlign:'center',
    margin:10
  } 
});

I'm getting data in postman url from SQL server

I'm getting this warning msg

Empty Emulator Screen

Console Warning msg

Answer 1

添加您的 IP 地址而不是 localhost

1.) 运行 cmd

2.) 输入 ipconfig

3.) 向下滚动到 IPv4 Address. . . . . . . . . . . : 192.168.**.**

4.) 复制此 IP 并将其替换为 localhost

5.) 完成

像这样获取你的IP

假设您的 IPv4 地址是 - 192.168.100.84

您的 fetch 应如下所示

fetch('http://192.168.100.84:7483/api/StudentData/')

也用于在fetch之后设置状态

你必须这样做

this.setState({ isLoading: false, dataSource: responseJson })

代替这个

this.state({ isLoading: false, dataSource: responseJson })

在你的 render 部分这样写

 return(
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this._renderItem}
          keyExtractor={(item,index) => index.toString()}
        />
      </View>
    );

您的 App.js 使用函数组件

import React, { Component, useState, useEffect } from 'react';
import {
  StyleSheet,
  View,
  ActivityIndicator,
  TouchableOpacity,
  Text,
  Dimensions,
  FlatList,
} from 'react-native';

export default function App() {
  const [State, setState] = useState({
    loading: true,
    dataSource: [],
  });

  useEffect(() => {
    GetData();
  }, []);

  const GetData = async () => {
    const result = await fetch('http://192.168.43.159:7483/api/StudentData/');
    const response = await result.json();
    setState({
      ...State,
      isLoading: false,
      dataSource: response,
    });
  };

  const _renderItem = ({ item, index }) => {
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={State.dataSource}
        renderItem={_renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Answer 2

在带有 localhost 的 android 模拟器 URL 中不起作用，因此您必须设置 ipv4 地址而不是那个。

同时改变this.state -> this.setState

FlatList - 从 Postman 本地主机 url 获取数据

2 个答案: