![](/img/trans.png)
[英]How to fetch Firebase Json api, I got response and i can consol log it, But the problem with FlatList
[英]What should I type in flat list to fetch that json API, I got the response and I can consol.log it
I try to fetch data from Firebase with Axios and Redux to handle the state, Everything Is fine and I could console.log the data too, but FlatList doesn't show any data, Here is my Code:
这是 Redux 的动作。
import axios from "axios";
import { GET_PRODUCTS } from "./types";
export const fetchData = () => {
return (dispatch) => {
return axios
.get("https://learn-efc13-default-rtdb.firebaseio.com/products.json")
.then((response) => {
return response.data;
})
.then((data) => {
dispatch({
type: GET_PRODUCTS,
payload: data,
});
console.log(data);
})
.catch((error) => {
throw error;
});
};
};
这是减速机
import { GET_PRODUCTS } from "./types";
const initState = {
availableProducts: [],
};
const reducer = (state = initState, action) => {
switch (action.type) {
case GET_PRODUCTS:
return {
availableProducts: action.availableProducts,
};
default:
return state;
}
};
export default reducer;
最后是包含 FlatList 的屏幕
import React, { useEffect } from "react";
import { View, Text, FlatList } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { fetchData } from "./store/action";
function ScreenMain() {
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
const data = useSelector((state) => state.availableProducts);
const dispatch = useDispatch();
return (
<View style={styles.con}>
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>
{item.name}
{item.age}
</Text>
)}
/>
</View>
);
}
export default ScreenMain;
我在 console.log 数据中添加了 useEffect 挂钩
你能像这样包装<FlatList />
:
{data &&
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>
{item.name}
{item.age}
</Text>
)}
/>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.