如何在 React Native 中从 graphql 数据库 API 获取请求渲染对象

Question

向 graphql API 发送请求会返回一个可以在控制台日志中观察到的对象（请参阅示例输出）。响应还可以分配给要在平面列表中呈现的变量。可以使用 JSON.stringify 读取此变量，但无法提取元素。数据库中的记录根据 UUID 分配唯一的“idx”变量，而不是 ID 整数。

问题是“如何将 Reports 数组的内容提取到平面列表或其他列表”。

控制台日志输出：

对象 数据： 得到： 报告：数组(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'} 2：{co_name：“东铁工业有限公司”，idx：“25f787d8-d422-529c-b59d-9872b43adab4”}

以下是用于进行graphql API调用的基本代码：

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()
  }, [])

已经尝试了各种方法，包括数组映射、数组 Flatlist、对象键、对象条目以及尝试使用 json stringify 提取元素。这些方法通常会导致 Get 和 Reports 元素返回为未定义或“对象作为 React 子项无效（找到：带有键 {Get} 的对象）”。

举个例子：

案例一： 让 userObj = JSON.stringify(reps.data); console.log(userObj);

返回 => {"Get":{"Reports":[{"co_name":"Ad-Sol Nissin Corporation","idx":"02bdddc2-7cbb-598e-9ade-6fbbb0c0201f"}, ...

案例2： 让 userObj = JSON.stringify(reps.data.Get); console.log(userObj);

返回=>“无法读取Get的属性：未定义”

任何关于如何从 Reports 数组中提取数据并作为 Flatlist 返回的想法将不胜感激。

Answer 1

您可以使用

FlatList

来渲染数据，这大概是

const data = [
    { co_name: 'Ad-Sol Nissin Corporation', idx: '02bdddc2-7cbb-598e-9ade-6fbbb0c0201f' },
    { co_name: 'Ad-Sol Nissin Corporation', idx: '03b508fc-a2ff-56ce-839d-988913aa3889' },
    { co_name: 'Totetsu Kogyo Co Ltd', idx: '25f787d8-d422-529c-b59d-9872b43adab4' }
  ]

您可以自定义 renderItem 函数以设置数据组件的样式。

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

const Component = () => {
 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()
  }, [])

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.co_name}</Text>
      <Text>{item.idx}</Text>
    </View>
  );

  return (
    <FlatList
      data={reps}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

export default Component;