React Native从API嵌套数组取数失败，请求排查代码问题

1. 语法错误：export default const 写法不合法 #

原代码里的组件导出语法错误，会直接导致组件无法正常加载，这是页面空白的核心原因之一。正确写法有两种：

// 方式一
const App = () => {
  // ...组件内容
};
export default App;

// 方式二
export default function App() {
  // ...组件内容
}

2. 嵌套数组访问错误 #

API返回的items是数组，你直接用data?.data?.items?.newOne无法获取数据，必须先访问数组索引（比如取第一个元素用items[0]），再获取newOne对象：

<Text>{data?.data?.items?.[0]?.newOne?.a}</Text>
<Text>{data?.data?.items?.[0]?.newOne?.b}</Text>
<Text>{data?.data?.items?.[0]?.newOne?.c}</Text>

3. 初始状态类型不匹配 #

API返回的是对象结构，但你初始化useState([])设为了数组，建议改为对象useState({})，让可选链逻辑更贴合数据结构：

const [data, setData] = useState({});

修复后的完整代码示例 #

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

export default function App() {
    const [data, setData] = useState({});

    useEffect(() => {
        // 模拟API请求逻辑，替换为你的真实请求代码
        const fetchData = async () => {
            const mockApiData = { code: 1, data:{ items:[{newOne:{a:2, b:4, c:6}, id:0},], totality: 1}};
            setData(mockApiData);
        };
        fetchData();
    }, []);

    return  (
       <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 18, marginBottom: 10 }}>fetched data</Text>
          <Text>{data?.data?.items?.[0]?.newOne?.a}</Text>
          <Text>{data?.data?.items?.[0]?.newOne?.b}</Text>
          <Text>{data?.data?.items?.[0]?.newOne?.c}</Text>
       </View>
    )
};

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