React Native中如何从GraphQL API提取Reports数组渲染FlatList

向GraphQL API请求后，返回的响应已赋值给用于FlatList渲染的变量，但无法提取Reports数组元素，常见错误包括Get/Reports为undefined，或Objects are not valid as a React child。数据库用UUID作为idx而非整数ID。

控制台返回数据结构 #

Object
data:
  Get:
    Reports: Array(14)
      0: {co_name: 'Ad-Sol Nissin Corporation', idx: '02bdddc2-7cbb-598e-9ade-6fbbb0c0201f'}
      1: {co_name: 'Ad-Sol Nissin Corporation', idx: '03b508fc-a2ff-56ce-839d-988913aa3889'}
      ...

当前请求代码 #

const [reps, setReps] = useState([]);
  
const fetchReportData = () => {
  fetch('http://localhost:8080/v1/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: `{
        Get{
          Reports(limit: 20){
            idx
            co_name
            }
          }
      }`
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
    setReps(data);
 }) 
  .catch(err => {
    console.log.error
  })
}
useEffect(() => {
  fetchReportData()
}, [])

错误原因 #

1. 直接将整个GraphQL响应对象（包含data.Get.Reports多层级）存入reps，而非提取目标数组
2. 渲染时未处理数据加载前的空状态，或未正确解构层级，导致读取undefined属性报错

解决方案 #

1. 修正数据赋值逻辑 #

在fetch回调中直接提取Reports数组，用可选链和默认值避免空值报错：

.then(data => {
  console.log(data);
  // 提取Reports数组，若层级不存在则返回空数组兜底
  const reportsList = data?.data?.Get?.Reports || [];
  setReps(reportsList);
})

2. FlatList渲染实现 #

直接使用reps作为数据源，用UUID类型的idx作为keyExtractor：

<FlatList
  data={reps}
  keyExtractor={(item) => item.idx}
  renderItem={({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
      <Text style={{ fontSize: 16 }}>{item.co_name}</Text>
      <Text style={{ color: '#666', fontSize: 12, marginTop: 4 }}>{item.idx}</Text>
    </View>
  )}
/>

3. 加载状态处理（可选） #

避免数据未加载时的空白或异常，可添加加载提示：

if (reps.length === 0) {
  return <Text style={{ textAlign: 'center', marginTop: 20 }}>加载中...</Text>;
}

排查要点 #

• 若仍报undefined，检查控制台打印的data结构是否与预期一致，确认data.data.Get.Reports路径正确
• 确保GraphQL接口返回的Reports字段确实为数组类型

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