首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >我应该在平面列表中输入什么来获取json API,我得到了响应并可以consol.log它。

我应该在平面列表中输入什么来获取json API,我得到了响应并可以consol.log它。
EN

Stack Overflow用户
提问于 2021-02-25 23:05:16
回答 1查看 48关注 0票数 0

我尝试用Axios和Redux从火库中获取数据来处理状态,一切都很好,我也可以console.log数据,但FlatList不显示任何数据,这是我的代码:

下面是Redux的操作。

代码语言:javascript
代码运行次数:0
运行
复制
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;
      });
  };
};

这是减速机

代码语言:javascript
代码运行次数:0
运行
复制
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的屏幕

代码语言:javascript
代码运行次数:0
运行
复制
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钩子

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-26 05:18:26

你能像这样包装<FlatList />吗:

代码语言:javascript
代码运行次数:0
运行
复制
{data && 
  <FlatList
     data={data}
     keyExtractor={(item) => item.id.toString()}
     renderItem={({ item }) => (
       <Text>
         {item.name}
         {item.age}
       </Text>
     )}
 />}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66371142

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档