功能反應本機：將 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} />
            );
        })
    );
}