I have the following code in my React App component, where I am trying to get some JSON and want to send that to my custom hook.

const fetchFn = useCommonFetch();
const [user1, status1] = fetchFn('myapi/urls', {}, 'GET');

useEffect(() => {
    someCustomHookCall(user1); // Pass "user1" JSON info to someCustomHookCall
}, [user1])

Below is how the useCommonFetch looks;

import {useEffect, useState} from 'react';

export default function useCommonFetch() {
    const fetchData = async (url, reqData, requestType) => {
        try {
            var statusObj = {
                statMsg: null,
                errMsg: null,
                status: null,
            };
            var reqOptions = {
                credentials: 'same-origin'
            }
            if (requestType === 'POST') {
                reqOptions.headers = {};
                reqOptions.headers['Accept'] = 'application/json';
                reqOptions.method = 'POST';
                reqOptions.body = JSON.stringify(reqData);
            }
            const response = await fetch(url, reqOptions);
            if (!response.ok) {
                throw response;
            }
            statusObj.status = "success";
            const json = await response.json();
            return [json, statusObj];
        } catch (error) {
            statusObj.status = "error";
            if (error && error.status) {
                switch (error.status) {
                    case 401:
                        statusObj.errMsg = "Unauthorized";
                        console.error("Unauthorized: "   error.status);
                        break;
                    default:
                        statusObj.errMsg = "Sys error";
                }
            }
            return [null, statusObj];
        }

    }
    return fetchData;
}

I am getting the following error while running

Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a Symbol.iterator method.

Not sure what is wrong in the calling code.

CodePudding user response：

The error occurs because you're trying to destructure a pending promise.
I have created a short