跨域错误：在 ReactJS Hooks 中设置 Local-storage/React.State 时发生

Question

I am facing an issue having Error of A cross-origin error , I am simply receiving the array of objects from child(Basket) which I am looking to save in localstorage & state , but as soon as I write the code to save the application breaks and showing the below error, point to note that I am also saving the state and localstorage for other items but it's not broken only when I write the below code in my application to save in localstorageuser-final and state finalBuy Any suggestions please guys.

Main (APP)___|
             |_Child 1(Signin)
             |_Child 2 (Basket)

If I exclude this below section of code the rest of application works fine .

let finalbuyitems = () => {
  let z1 = JSON.parse(window.localStorage.getItem("user-final") || "[]");
  console.log(z1);
  return z1;
};
 const [finalBuy, setfinalBuy] = useState(finalbuyitems());
                 // also i add resetBasket and set the setfinalBuy as well

                 const resetBasket = (basketItems) => {
                   setfinalBuy([...basketItems]);
                   window.localStorage.setItem("user-final", JSON.stringify([...basketItems]));
                   setBasketItems([]);
                   window.localStorage.setItem("user-basket", []);
                 };

I have console the finalbuyitems but it is returning the whole function not sure why

console.log(finalbuyitems);`

Below Snippet of all code from the App.js

import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import Nav from "./Nav";
import Sidebar from "./Component/Sidebar";
import Basket from "./Component/Basket";
import Accessories from "./Component/Accessories";
import Signin from "./Component/Signin";
import Error from "./Error";
import Home from "./Component/Home";

import Footer from "./Component/Footer";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const userAccountData = () => {
  return window.localStorage.getItem("user-data");
};
const isLoggedIn = () => {
  return !!window.localStorage.getItem("user-status"); // !! : cast to boolean
};

let initialvalue = () => {
  let y1 = JSON.parse(window.localStorage.getItem("user-basket") || "[]");
  console.log(y1);
  return y1;
};
// after i add finalbuyitems here i start getting the error
let finalbuyitems = () => {
  let z1 = JSON.parse(window.localStorage.getItem("user-final") || "[]");
  console.log(z1);
  return z1;
};
console.log(finalbuyitems); //console to check the finalbuyitems 


function App() {
                 const [siginalready, setifsignedin] = useState(isLoggedIn());
                 const [userData, setUserData] = useState(userAccountData());
                 const [basketItems, setBasketItems] = useState(initialvalue());
                 const [finalBuy, setfinalBuy] = useState(finalbuyitems());
                 // also i add resetBasket and set the setfinalBuy as well
                 const resetBasket = (basketItems) => {
                   setfinalBuy([...basketItems]);
                   window.localStorage.setItem("user-final", JSON.stringify([...basketItems]));
                   setBasketItems([]);
                   window.localStorage.setItem("user-basket", []);
                 };

                 const updatedBasket = (newProductQty) => {
                   setBasketItems((prevItems) => {
                     let updatedQuantityArray = [];
                     for (let z = 0; z < basketItems.length; z++) {
                       if (newProductQty.producNumber !== basketItems[z].producNumber) {
                         updatedQuantityArray.push(basketItems[z]);
                       } else {
                         if (newProductQty.quantity == 0) {
                         } else {
                           updatedQuantityArray.push(newProductQty);
                         }
                       }
                     }
                     window.localStorage.setItem("user-basket", JSON.stringify(updatedQuantityArray));
                     return updatedQuantityArray;
                   });
                 };

                 const addBasketitems = (product, quantity) => {
                   setBasketItems((prevItems) => {
                     let newItemsArray = [];
                     let changeHappen = 0;

                     if (basketItems.length < 1) {
                       const newItems = [...prevItems, { ...product, quantity }];

                       window.localStorage.setItem("user-basket", JSON.stringify(newItems));

                       return newItems;
                     } else {
                       const compareItem = [{ ...product, quantity }];
                       for (let i = 0; i < basketItems.length; i++) {
                         if (compareItem[0].producNumber !== basketItems[i].producNumber) {
                           newItemsArray.push(basketItems[i]);
                         } else {
                           newItemsArray.unshift(basketItems[i]);
                           newItemsArray[0].quantity = +basketItems[i].quantity + quantity;
                           changeHappen = 1;
                         }
                       }
                       if (changeHappen == 0) {
                         newItemsArray = [...newItemsArray, { ...product, quantity }];
                       }

                       console.log(newItemsArray);
                       window.localStorage.setItem("user-basket", JSON.stringify(newItemsArray));
                       return newItemsArray;
                     }
                   });

                   console.log(typeof product);
                   console.log("product", product);
                   // console.log(typeof quantity);
                   console.log("quantity", quantity);
                 };

                 console.log(typeof basketItems);
                 console.log(basketItems);

                 let url = "http://localhost:5000/api/verifyifloginalready";

                 let options = {
                   credentials: "include",
                   method: "POST",
                 };

                 let verifyifloginalready = new Request(url, options);
                 useEffect(() => {
                   credentailverify();
                 }, []);

                 function credentailverify() {
                   (async () => {
                     const x1 = await fetch(verifyifloginalready)
                       .then((res) => {
                         if (res.status == 400 || res.status == 401) {
                           console.log(res.status);
                           window.localStorage.removeItem("user-data");

                           return setifsignedin(false);
                         } else if (siginalready == false) {
                           setifsignedin(true);

                           return res.json();
                         } else {
                           return;
                         }
                       })
                       .then((data) => {
                         setUserData(data.data);
                         window.localStorage.setItem("user-status", true);
                         window.localStorage.setItem("user-data", data.data);
                       })
                       .catch((err) => console.log("err"));
                     console.log(userData);
                     console.log(siginalready);

                     return x1;
                   })();
                 }

                 return (
                   <Router>
                     <div className="App">
                       <header className="header">
                         <Nav userinfo={userData} userstatus={siginalready} />
                       </header>

                       <div className="main">
                         <Switch>
                           <Route path="/" exact render={(props) => <Home {...props} userData={userData} userstatus={siginalready} addBasketitems={addBasketitems} />} />

                           <Route
                             path="/basket"
                             exact
                             render={(props) => (
                               <Basket {...props} userData={userData} userstatus={siginalready} basketItems={basketItems} updatedBasket={updatedBasket} resetBasket={resetBasket} />
                             )}
                           />
                           <Route path="/signin" exact render={(props) => <Signin {...props} userData={userData} finalBuy={finalBuy} userstatus={siginalready} />} />
                           <Route path="/accessories" exact render={(props) => <Accessories {...props} userData={userData} userstatus={siginalready} />} />
                         </Switch>
                       </div>

                       <div className="footer">
                         <Footer />
                       </div>
                     </div>
                   </Router>
                 );
               }

export default App;

Snippet from the Basket.js

when the button is clicked it will call the buyNow function and send the basketItems from child to Parent(APP)

 const buyNow = (basketItems) => {
  
   
    resetBasket(basketItems);
     window.location.href = "http://localhost:3000/signin";
  };

Answer 1

Hi Umair_007 it's been 9 months without an answer.
I have two suggestions:
Firstly, your code examples are two lengthy for others to study them and devise a coherent answer, and
Secondly, when instead of the data JS returns the function that should proide the date, chances are that a pair of parenthesis is missing in the code, you know, the difference between referencing a function vs. calling it. But this is just a guess.