React Native中访问JSON数组返回undefined问题求助

It’s super frustrating when you know the server is sending back the right data, but you can’t access the data array in React Native. Let’s break down the most likely issues and how to fix them:

1. You haven’t parsed the JSON response yet #

Most server responses come as raw JSON strings, not JavaScript objects. If you skip parsing them, trying to access userData.data will return undefined because a string doesn’t have a data property.

Fix: Use .json() (for fetch) or ensure your HTTP client (like Axios) automatically parses the response:

Example with fetch: #

fetch('your-server-endpoint')
  .then(response => {
    // Parse the raw JSON string to a JavaScript object
    return response.json();
  })
  .then(userData => {
    console.log(userData.data); // Now this should work!
  })
  .catch(error => console.error('Request error:', error));

Example with Axios: #

Axios parses JSON by default, so you just need to handle the response correctly:

axios.get('your-server-endpoint')
  .then(response => {
    const userData = response.data;
    console.log(userData.data); // Access the data array here
  })
  .catch(error => console.error('Request error:', error));

2. The data hasn’t loaded yet (async timing issue) #

If you’re trying to access userData.data immediately when your component mounts, the API request might still be in flight—so userData is still its initial value (like null or an empty object), leading to undefined when you try to access data.

Fix: Add conditional checks before accessing the array to handle the loading state:

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

function YourComponent() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // Fetch data when component mounts
    fetch('your-server-endpoint')
      .then(res => res.json())
      .then(data => setUserData(data));
  }, []);

  return (
    <View>
      {/* Use optional chaining to avoid errors while loading */}
      {userData?.data ? (
        userData.data.map(item => (
          <Text key={item.serial}>{item.product_name}</Text>
        ))
      ) : (
        <Text>Loading data...</Text>
      )}
    </View>
  );
}

The ?. optional chaining operator prevents crashes if userData is null or undefined while the request is pending.

3. The response structure doesn’t match your expectation #

Sometimes the server might return a nested structure you didn’t account for, or there’s a typo in the key name (case matters in JavaScript—Data is not the same as data!).

Fix: Log the full response to verify the exact structure:

fetch('your-server-endpoint')
  .then(res => res.json())
  .then(userData => {
    console.log('Full server response:', userData);
    // Check if the data array is actually under userData.data
    // If it's nested elsewhere (like userData.payload.data), adjust your access path
  });

This will show you exactly what keys are present in the response, so you can correct how you access the array.

4. Edge case: The server returns data as null #

Looking at your sample JSON, pairing is null—it’s possible that in some scenarios, the server sends data: null instead of an empty array. While this won’t return undefined, you’ll still want to handle it to avoid errors when trying to map over the array.

Fix: Add a check for null and confirm it’s an array:

if (userData.data && Array.isArray(userData.data)) {
  // Safe to map over the array here
} else {
  console.log('Data is either null or not an array');
}

内容的提问来源于stack exchange，提问作者Ray Jonathan