React Native中如何将API数据渲染至Text组件（含tasks列表渲染）

Hey there! Let's get your API data rendered properly. I notice a couple of small issues in your current code, mainly around accessing nested data and rendering the tasks list. Here's a step-by-step fix:

1. Handle Async Loading State #

First, since your API call is asynchronous, you need to account for the time before ServiceTData is populated. Trying to access nested properties before the data loads will throw errors.

2. Access Nested Data Correctly #

Your API response has createdAt and tasks nested inside the data object, not directly on ServiceTData. So you'll need to access them as ServiceTData.data.createdAt and ServiceTData.data.tasks.

3. Render Tasks as a List #

For the tasks array, use React Native's FlatList (the recommended component for lists) or map over the array to render individual list items.

Updated Render Function #

Here's the revised RenderServiceTicket function with all fixes included:

RenderServiceTicket(ServiceTData) {
  // Show loading state if data isn't ready yet
  if (!ServiceTData?.data) {
    return (
      <SafeAreaView>
        <Text>Loading service ticket data...</Text>
      </SafeAreaView>
    );
  }

  const { createdAt, tasks } = ServiceTData.data;

  return (
    <SafeAreaView>
      <ScrollView style={{ paddingTop: 10 }}>
        <Card borderRadius={15}>
          <View style={{ padding: 15 }}>
            {/* Render createdAt */}
            <Text style={{ fontSize: 16, marginBottom: 10 }}>
              Created At: {createdAt}
            </Text>

            {/* Render Tasks List */}
            <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
              Tasks:
            </Text>
            <FlatList
              data={tasks}
              keyExtractor={(item) => item.ttId.toString()}
              renderItem={({ item }) => (
                <View style={{ 
                  borderBottomWidth: 1, 
                  borderBottomColor: '#eee', 
                  paddingVertical: 8 
                }}>
                  <Text>Topic: {item.topic}</Text>
                  <Text>Product: {item.product}</Text>
                  <Text>Model: {item.model}</Text>
                  <Text>Issue: {item.remark}</Text>
                  <Text>Serial Number: {item.serialNumber}</Text>
                  <Text>Warranty Status: {item.warrantyStatus}</Text>
                </View>
              )}
              scrollEnabled={false} // Disable scrolling since we're inside a ScrollView
            />
          </View>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

Alternative: Map Over Tasks Array #

If you prefer not to use FlatList, you can map the tasks array directly (great for small lists):

// Replace the FlatList section with this:
<View>
  {tasks.map((task) => (
    <View 
      key={task.ttId}
      style={{ 
        borderBottomWidth: 1, 
        borderBottomColor: '#eee', 
        paddingVertical: 8,
        marginVertical: 4
      }}
    >
      <Text>* {task.topic} - {task.remark}</Text>
      {/* Add other task fields as needed */}
    </View>
  ))}
</View>

Key Notes: #

• The ?. optional chaining operator (ServiceTData?.data) prevents errors when the data is still loading.
• For FlatList, keyExtractor uses ttId (a unique value from your task objects) to help React track list items efficiently.
• Adding padding and borders to list items improves readability.

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