我尝试用Axios和Redux从火库中获取数据来处理状态,一切都很好,我也可以console.log数据,但FlatList不显示任何数据,这是我的代码:
下面是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钩子
发布于 2021-02-25 21:18:26
你能像这样包装<FlatList />
吗:
{data &&
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>
{item.name}
{item.age}
</Text>
)}
/>}
https://stackoverflow.com/questions/66371142
复制相似问题