功能反应本机：将 api 数据传递给组件时出现错误：PayloadTooLargeError：请求实体太大

Question

产品数据.js

const productsArray = [];

//api call being made to get all the products
async function getProductAPI() {
    try {
        let apiResultResponse = await fetch('https://fakestoreapi.com/products');
        let apiResultData = await apiResultResponse.json();
        return apiResultData;
    } catch (err) {
        console.log(err);
    }
}
let dataa = getProductAPI();
dataa
    .then((data) => {
        for (let i = 0; i < data.length; i++) {
            productsArray.push(data[i]);
            console.log(productsArray);
        }
    })
    .catch((err) => console.log(err));

export default productsArray;

首页.js

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Product from '../../components/Product';
import productsArray from '../../api/productData';

console.log(productsArray) //if this console.log is removed the value wont be rendered in the UI

export default function HomeScreen({ navigation }) {
    return (
        productsArray.map((product, index) => {
            return (
                <Product product={product} key={index} navigation={navigation} />
            );
        })
    );
}

所以错误：我得到的是

Array [
  Object {
    "category": "men clothing",
    "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
    "id": 1,
    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
    "price": 109.95,
    "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  },
]
PayloadTooLargeError: request entity too large
    at readStream (/usr/local/lib/node_modules/expo-cli/node_modules/raw-body/index.js:155:17)
    at getRawBody (/usr/local/lib/node_modules/expo-cli/node_modules/raw-body/index.js:108:12)
    at read (/usr/local/lib/node_modules/expo-cli/node_modules/body-parser/lib/read.js:77:3)
    at jsonParser (/usr/local/lib/node_modules/expo-cli/node_modules/body-parser/lib/types/json.js:135:5)
    at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
    at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
    at serveStatic (/usr/local/lib/node_modules/expo-cli/node_modules/serve-static/index.js:75:16)
    at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
    at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
    at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:248:3)

我这里的逻辑是制作一个单独的文件来保存不同的逻辑。 例如，我让productData.js使用 api 并填充将导出到Home.js的数组。 当我做

console.log(productsArray)

它正常显示 output，甚至在模拟器上呈现。 但是如果我要刷新我的模拟器，我会得到 PayloadTooLargeError。

我缺少一些逻辑吗？

Answer 1

我所要做的就是添加一个自定义挂钩逻辑。

应该改变

产品数据.js

import React, { useEffect, useState } from 'react';

//api call being made to get all the products
//making use of hook
let productsArray = () => {
    let [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://fakestoreapi.com/products')
            .then(res => res.json())
            .then(setData)
            .catch((err) => console.log(err));
    }, []);
    return data;
};

export default productsArray;

并且需要确保我在 function 组件中调用了那个钩子，它是

首页.js

import productsArray from '../../api/productData';



export default function HomeScreen({ navigation }) {
    let products = productsArray();  //important 
    return (
        products.map((product, index) => {
            return (
                <Product product={product} key={index} navigation={navigation} />
            );
        })
    );
}