React Native中如何将API返回数据渲染至Text组件

Problem #

I've successfully made an API call and stored the data in the serviceTData variable, but I can't get the createdAt field (which looks like "createdAt": "2021-08-06 13:27:55" in the API response) to show up in my Text component. Here's my current code:

Render Function #

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

API Call Code #

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]);

Solution #

Hey, let's fix this step by step—looking at your code, I spot a few key issues that are keeping you from displaying the createdAt value correctly:

1. Mismatched Variable Names #

You're storing the API response data in serviceTData (via setServiceTData(STData.data)), but your render function is trying to access data.createdAt—that's the first big problem. Make sure your render function has access to the serviceTData variable:

• If serviceTData is a state variable in the same component, use it directly.
• If it's passed down from a parent component, access it via props (e.g., props.serviceTData).

2. Handle Data Type (Array vs. Single Object) #

From setServiceTData(STData.data), it's likely that STData.data is either an array of service tickets or a single ticket object. Let's cover both cases:

Case 1: Single Service Ticket (STData.data is an Object)

If the API returns one ticket, update your render function to use serviceTData.createdAt, and add a check to avoid errors while data loads:

function RenderServiceTicket() {
  // Assuming serviceTData is a state variable in this component
  const [serviceTData, setServiceTData] = useState({});
  const [refreshing, setRefreshing] = useState(false);

  return (
    <SafeAreaView>
      <View>
        {/* Show loading state or fallback if data isn't ready */}
        <Text>{refreshing ? 'Loading...' : serviceTData.createdAt || 'No date available'}</Text>
      </View>
    </SafeAreaView>
  )
}

Case 2: Multiple Service Tickets (STData.data is an Array)

If the API returns a list of tickets, use map() to iterate over the array and display each createdAt value. Also, handle empty states:

function RenderServiceTicket() {
  const [serviceTData, setServiceTData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  return (
    <SafeAreaView>
      <View>
        {refreshing ? (
          <Text>Loading tickets...</Text>
        ) : serviceTData.length === 0 ? (
          <Text>No service tickets found</Text>
        ) : (
          serviceTData.map((ticket, index) => (
            {/* Use a unique key instead of index if possible (e.g., ticket.id) */}
            <Text key={index}>{ticket.createdAt}</Text>
          ))
        )}
      </View>
    </SafeAreaView>
  )
}

3. Ensure Proper Variable Scope #

Double-check that serviceTData and refreshing are accessible within the RenderServiceTicket component. If your onRefresh function is defined in a parent component, make sure to pass serviceTData as a prop to RenderServiceTicket.

Final Notes #

The main fixes are aligning your variable names and handling the correct data structure (array vs. object). Adding loading/empty state checks will also make your app more user-friendly and prevent runtime errors.

内容的提问来源于stack exchange，提问作者Ryan Fonseka