reactjs - 我应该在平面列表中输入什么来获取那个 json API,我得到了响应,我可以 consol.log 它
问题描述
我尝试使用 Axios 和 Redux 从 Firebase 获取数据来处理状态,一切都很好,我也可以 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 挂钩
解决方案
你能像这样包装吗<FlatList />
:
{data &&
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>
{item.name}
{item.age}
</Text>
)}
/>}
推荐阅读
- sql - 使用 SQL Server 在连续行中检查行值
- mysql - 如何使用 laravel 7 在 mysql 中分配列的大小
- javascript - 如何将切换开关数据从 PHP 发送到 JSON
- javascript - 如何在网格单元格上方添加文本?
- javascript - vue.js 中嵌套循环下的 if else 语句显示确切值
- java - 使用 ElasticsearchOperations 创建索引弹性搜索时出错。为什么会发生“BytesReference 类是预期的”异常?
- angular - 如何在 Clarity/Angular 应用程序中有两个级别的路由器插座?
- php - 按价格从高到低排序不起作用
- php - 执行“cache:clear --no-warmup”命令时出错:
- reactjs - 如何为成功部署的 React 应用程序修复 Heroku 应用程序错误