尝试使用 React Native 和 Expo 在 c# 中使用 API REST 时的值 "undefined"

Question

我正在使用 Expo 框架制作一个 Android 应用程序。我是 React Native 的初学者，我不知道为什么会出现这个“错误”。当我尝试使用 Rest API 时，我发现这些值是“未定义的”。其余的 API 是在 C# 中，我不知道这是我制作 API 的方式还是它试图消耗 API.

这将是我在 React Native 和 Expo 中的代码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
console.reportErrorsAsExceptions = false;
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  state={
    data:{'Medicines':'Cargando...'}
  }
  
  getJsonData = () =>{
    fetch('https://localhost:5001/api/Medicines/',
    {method:'GET'}).then((response)=>response.json())
    .then((responseJson)=>{
      console.log(responseJson);
      this.setState({
        data:responseJson
      })
    })
    .catch((error)=>{
      console.error(error)
    });
  }

  componentDidMount=()=>{
    this.getJsonData();
  }
  
  render(){
      return (
        <View style={styles.container}>
          <Text style={{margin:10, fontSize:16}}>{'ID: '+ this.state.data['id']}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Name: '+ this.state.data['name']}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Price: '+ this.state.data['price']}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Mark: '+ this.state.data['mark']}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Description: '+ this.state.data['description']}</Text>
          <StatusBar style="auto" />
        </View>
      );
    }
}

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

这是我在使用 expo web 视图时得到的结果（我使用 expo web 视图是因为 Android 视图从我的电脑上消耗了太多资源），这是值得的：

Answer 1

您正在获取一个数组作为响应，并且您正在访问 UI 中作为对象的状态。将您的代码更改为：this.state.data[0].id 以及类似的其他字段。

Answer 2

您使用 data 对象定义您的状态，稍后在 setState 中，您使用 对象数组 [=49= 更新它].

所以改变你的状态定义：

state = { data: [] }

如果你想有一个默认值，你可以初始化你的state.data:

state = { data: [{id: 0, name: "", mark: "", description: "", ...}] }

API调用成功后，您的数据将是：

state = { data = [ {id: 0, name: 'Moderna', price: 0, ...}, {id: 1, name: 'Patillas', price: 123.5, ...}, ] }

现在，在 return 方法中，您可以遍历 data 以显示所有数据或显示第一项：

render(){ console.log(this.state.data) const firstElement = this.state.data[0] return ( <View style={styles.container}> <Text style={{margin:10, fontSize:16}}>{'ID: '+ firstElement.id}</Text> <Text style={{margin:10, fontSize:16}}>{'Name: '+ firstElement.name}</Text> <Text style={{margin:10, fontSize:16}}>{'Price: '+ firstElement.price}</Text> <Text style={{margin:10, fontSize:16}}>{'Mark: '+ firstElement.mark}</Text> <Text style={{margin:10, fontSize:16}}>{'Description: '+ firstElement.description}</Text> <StatusBar style="auto" /> </View> ); }

注意：你可以在render方法中和return之前放一个console.log来查看数据。

更新

如果你想遍历你的数据，你需要创建另一个组件（可以是功能组件）：

const ShowItem = ({id, name, price, mark, description}) => ( <View style={styles.container} key={id}> <Text style={{margin:10, fontSize:16}}>{'ID: '+ id}</Text> <Text style={{margin:10, fontSize:16}}>{'Name: '+ name}</Text> <Text style={{margin:10, fontSize:16}}>{'Price: '+ price}</Text> <Text style={{margin:10, fontSize:16}}>{'Mark: '+ mark}</Text> <Text style={{margin:10, fontSize:16}}>{'Description: '+ description} </Text> <StatusBar style="auto" /> </View> )

注意：不要忘记传递key

现在，在 App 组件上使用它：

render(){ return( <View> { this.state.data.map(item => ( <ShowItem id={item.id} name={item.name} price={item.price} mark={item.mark} description={item.description} /> )) } </View> ) }

尝试使用 React Native 和 Expo 在 c# 中使用 API REST 时的值 "undefined"

Value "undefined" when trying to consume an API REST in c# with React Native and Expo

react-native

expo

更新