时间戳

首页 > 解决方案 > 我想将 API 数据放入我的 Text 元素中 ~ React Native

react-native - 我想将 API 数据放入我的 Text 元素中 ~ React Native

问题描述

我已经完成了 API 调用并将数据放入变量中。但现在我想在 TEXT 元素中显示它们。我的 API 数据 API 数据

我的代码

function RenderServiceTicket(){
    return ( 
    <SafeAreaView>
     <View>
     <Text>{data.createdAt}</Text>
     </View>
     </SafeAreaView>
)}

我想得到“createdAt”：“2021-08-06 13:27:55”，

在此处输入图像描述

API 调用代码

const  onRefresh = React.useCallback(async() => {
    setServiceTData([]);
    const deviceId = await AsyncStorage.getItem('@device_ID')
    const sessionId = await AsyncStorage.getItem('@session_Id')
    console.log('device ID: ',deviceId, 'session IDs: ', sessionId)
      setRefreshing(true);        
        (async () => {
        try{
        const ServiceTicketData = await fetch(`${API_URL}/v1/serviceTicket`, {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'apiKey': 'asdkhjfgsed34e',
                'deviceId': deviceId,
                'sessionId': sessionId
    
            },
        })
        const STData = await ServiceTicketData.json();
        console.log("ST Data",STData);
        setServiceTData(STData.data);
        setRefreshing(false)

        } catch (error) {
            console.log(error);
        }
    })()
        
    }, [refreshing]);

标签： react-native

解决方案

根据我对您的代码的理解，我建议尝试这样的事情：

const [serviceTData, setServiceTData] = React.useState([]);

const onRefresh = React.useCallback(async() => {
    
  const deviceId = await AsyncStorage.getItem('@device_ID');
  const sessionId = await AsyncStorage.getItem('@session_Id');
  console.log('device ID: ',deviceId, 'session IDs: ', sessionId);
  setRefreshing(true);        
  (async () => {
    try{
      const ServiceTicketData = await fetch(`${API_URL}/v1/serviceTicket`, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'apiKey': 'asdkhjfgsed34e',
          'deviceId': deviceId,
          'sessionId': sessionId
    
        },
      });
      const STData = await ServiceTicketData.json();
      console.log('ST Data',STData);
      setServiceTData(STData.data);
      setRefreshing(false);

    } catch (error) {
      console.log(error);
    }
  })();
        
}, [refreshing]);

const RenderServiceTicket = () => {
  return (
    <SafeAreaView>
      <View style={{height: '50%', width: '50%'}}>
        {serviceTData.length > 0 && <Text>{serviceTData.createdAt}</Text>} // at this point, you should get a black text, add some style
      </View>
    </SafeAreaView>
  );
};

除此之外，我会对文本应用一些样式，对容器应用一些大小，以便显示元素。

如果它仍然不起作用，那么您应该查看处理异步函数的方式。

推荐阅读