React Native中API返回对象时FlatList无法渲染数据求解

我无法从指定接口拉取并展示目标JSON数据，接口地址：https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494
控制台无报错，但始终无法查看已拉取的目标数据。

排查结论 #

API响应结果为object类型，而FlatList组件仅接收array类型作为数据源，需要确认是替换组件还是调整逻辑实现正常渲染。
现有业务实现代码如下：

import React, { useState,useEffect } from 'react';
import {
  View,
  Text,
  TextInput,
  SafeAreaView,
  Keyboard,
  ScrollView,
  Alert,
  FlatList
} from 'react-native';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import Input from '../src/views/components/Input';
import Loader from '../src/views/components/Loader';

const EditScreen = (item) => {

  const [data,setData] = useState([])
  const [loading,setLoading]= useState(true)


  const fetchData = ()=>{
     fetch("https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494")
     .then(res=>res.json())
     .then((json)=>setData(json))
     .catch((error)=>console.error(error))
     .finally(()=>setLoading(false))
     }
  useEffect(()=>{
       fetchData()
  },[])

  const {businessid,link,title} = item

  const [inputs, setInputs] = React.useState({
    businessid: '',
    link: '',
    title: '',
  });
  const [errors, setErrors] = React.useState({});
  React.useState(false);


  const RenderCollection = (item) =>{

      return(

        <View style={{marginVertical: 20}}>

          <Input
            onChangeText={text => handleOnchange(text, 'businessid')}
            label="businessid"
            defaultValue={item.businessid}
          />


          <Input
            onChangeText={text => handleOnchange(text, 'link')}
            label="link"
            defaultValue={item.link}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'title')}
            label="Title"
            defaultValue={item.Title}
          />


          <Button title="Save"  />
          <Button title="Cancel"  />

        </View>
      )
    }



  return (
    <SafeAreaView>
      <Loader visible={loading} />
      <ScrollView>
        <Text> Edit  </Text>
        <Text>  Now You Can Edit ! </Text>

        <FlatList
                    data={data}
                    renderItem={({item})=>{
                      return RenderCollection(item)
                    }}
                    keyExtractor={item=>item.businessid}
                    onRefresh={()=>fetchData()}
                    refreshing={loading}
                    />
      </ScrollView>
    </SafeAreaView>
  );
};

export default EditScreen;

预期渲染结果为预填充完成的编辑表单，实际渲染效果：效果截图

不需要替换FlatList，核心问题是传入的data类型不匹配，同时代码存在几处会导致渲染异常的问题，按以下步骤修改即可：

1. 适配接口返回类型
   接口返回单个编辑对象时，直接将对象包装为长度为1的数组传给FlatList即可，修改fetchData逻辑：

   const fetchData = ()=>{
      fetch("https://flow.simpas.ai/paysagiste/article?userid=w8&businessid=ecofence_wattel_set_1_25m&companynumber=0899607494")
      .then(res=>res.json())
      .then((json)=>{
          // 自动适配数组/对象返回值
          setData(Array.isArray(json) ? json : [json])
      })
      .catch((error)=>console.error(error))
      .finally(()=>setLoading(false))
   }
   

   如果接口返回结构为对象嵌套数组（例如{ list: [] }），直接取出对应数组字段赋值给data即可。

2. 修复滚动容器嵌套冲突
   FlatList自带滚动能力，外层嵌套ScrollView会导致渲染异常、滚动冲突，直接移除ScrollView，同时给SafeAreaView加flex:1保证布局占满全屏：

   return (
     <SafeAreaView style={{flex: 1}}>
       <Loader visible={loading} />
       <Text> Edit  </Text>
       <Text>  Now You Can Edit ! </Text>
       <FlatList
         data={data}
         renderItem={({item})=> <RenderCollection item={item} />}
         keyExtractor={item=>item.businessid}
         onRefresh={()=>fetchData()}
         refreshing={loading}
         contentContainerStyle={{paddingHorizontal: 20}}
       />
     </SafeAreaView>
   );
   

3. 修复组件传参与字段错误

   • RenderCollection组件接收的是props对象，需要解构出item字段才能拿到数据
   • 表单字段Title大小写错误，接口返回的是小写title
   • 补全缺失的handleOnchange方法，否则输入框无法响应输入
     修改后代码：

   // 补全表单更新方法
   const handleOnchange = (text, inputKey) => {
     setInputs(prev => ({...prev, [inputKey]: text}));
   };
   
   const RenderCollection = ({item}) =>{
     return(
       <View style={{marginVertical: 20}}>
         <Input
           onChangeText={text => handleOnchange(text, 'businessid')}
           label="businessid"
           defaultValue={item.businessid}
         />
         <Input
           onChangeText={text => handleOnchange(text, 'link')}
           label="link"
           defaultValue={item.link}
         />
         <Input
           onChangeText={text => handleOnchange(text, 'title')}
           label="Title"
           defaultValue={item.title}
         />
         <Button title="Save"  />
         <Button title="Cancel"  />
       </View>
     )
   }
   

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