数据未在本机反应中使用 Flatlist 呈现

Question

我正在从 api 获取数据并将其存储在功能组件中的状态中 如果我只是在 {data} 中打印数据，它会以 json 格式显示所有数据 但它没有使用 flatlist 进行渲染。

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

useEffect(() => {
    fetchData();
}, []);

const fetchData = async() =>
{

    const request =  await axios.get('/obj/Category');
    setData(JSON.stringify(request.data.response.results));
    console.log(request.data.response.results);
    return request;
}

const Item = (props) => (
    <View style={styles.item}>
      <Text style={styles.title}>{props.title}</Text>
    </View>
  );
  
  const renderItem = ({ item }) => (
    <Item cName={item.cName} />
  );
  

return (
    <SafeAreaView style={styles.container}>
        <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item._id}
       /> 
    </SafeAreaView>
)
}
    
    
I am getting this data 

[
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211075844x987594468971699600/AirPlant.png",
        "cName":"AirPlant",
        "Created Date":"2020-06-12T03:50:32.293Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:58.122Z",
        "_id":"1591933832293x740470401637297400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211065995x923166783941526000/Aquatic.png",
        "cName":"Aquatic",
        "Created Date":"2020-06-12T03:50:54.814Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:48.282Z",
        "_id":"1591933854814x594601779376298400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211055775x815245486081858600/CacSucc.png",
        "cName":"CacSucc",
        "Created Date":"2020-06-12T03:51:08.824Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:37.763Z",
        "_id":"1591933868824x824580506688475900",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211046766x525372817880738000/Carnie.png",
        "cName":"Carnie",
        "Created Date":"2020-06-12T03:51:48.497Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:28.878Z",
        "_id":"1591933908497x739290661511488500",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211038814x188848007836712300/Flowery.png",
        "cName":"Flowery",
        "Created Date":"2020-06-12T03:52:02.800Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:20.613Z",
        "_id":"1591933922800x240413248643147620",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211030148x445996690624532700/Leafy.png",
        "cName":"Leafy",
        "Created Date":"2020-06-12T03:52:14.162Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:11.914Z",
        "_id":"1591933934162x408228620159180000",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211021175x413587314607428300/Exotic.png",
        "cName":"Exotic",
        "Created Date":"2020-06-12T03:52:25.027Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:03.554Z",
        "_id":"1591933945027x914059867656276400",
        "_type":"custom.category"
    }
]

但是我得到的屏幕只有线条并且应用了 css 样式但没有显示数据

请帮助我如何解决这个问题或任何建议或替代方法 提前致谢

Answer 1

您将 cName 作为标题传递给 Item 组件。

请像下面这样更改项目组件。

const Item = (props) => (
  <View style={styles.item}>
    <Text style={styles.title}>{props.title}</Text>
  </View>
);

Answer 2

当您在 renderItem 函数中将 title 作为道具传递给 Item 时， 您必须在 Item 函数中使用相同的道具名称接收该道具。

const Item = (props) => ( 
    <View style={styles.item}>
        <Text style={styles.title}>{props.cName}</Text>
    </View> 
); 
const renderItem = ({ item }) => ( <Item cName={item.cName} /> );

Answer 3

这是使用 React Hooks 处理网络请求的更好方法，

尝试将您的网络请求提取到一个单独的函数并在 useEffect 中调用它。

const fetchData = async() =>
{
   
    const request =  await axios.get('https://randomuser.me/api/');
    setData(request.data);
    console.log(data);
    return request;
}



useEffect(() => {
   
  fetchData();
}, []);