Question

我正在构建一个项目，在该项目中，当用户单击Basket (child 2)中的buyNow按钮时，它将把道具传递回父项，然后进一步将其传递给Signin(child 3)中的另一个孩子，我们称之为{ {1}}调用API以更新mysql数据库，但似乎(inside useEffect)是API call，就像在called twice中一样，在前端我得到了两个相同的发票记录但文件名不同。

任何建议者我为什么要面对这个问题，请注意，如果我从database two records中删除了useEffect语句，它将连续不断地调用Signin，所以我认为我不能删除API call，否则我看不到它为什么发生。请提出任何建议。

useEffect

更新1：：删除Main (APP)___| |_Child 1(Home) |_Child 2 (Basket) |_Child 3 (signin)(API triggers here)---Sub Child 3-1 (useraccount)后，它确实解决了问题，但这是否意味着我是否临时解决了该问题，或者是否必须使用stricMode并找到了真正的问题。问题

儿童2-篮子-客户按下buyNow按钮，并触发resetBasket功能

strictMode

主应用程序 resetBasket接受basketitems并传递给父元素



     const buyNow = (basketItems) => {
      resetBasket(basketItems);
         window.location.href = "http://localhost:3000/signin";
      };
    
     <ButtonGroup aria-label="quantityofproduct">
                        <Button variant="secondary" name="subtract" value="subtract" onClick={() => buyNow(basketItems)}>
                          Buy Now
                        </Button>
                      </ButtonGroup>

孩子3-登录，在这里我们调用const [finalBuy, setfinalBuy] = useState(finalbuyitems()); const resetBasket = (basketItems) => { setfinalBuy(basketItems); window.localStorage.setItem("user-final", JSON.stringify(basketItems)); } <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} buyNow={buyNow} resetBuynow={resetBuynow} userData={userData} finalBuy={finalBuy} userstatus={siginalready} />} />并更新Mysql服务器，并从后端接收API call(using useEffect)格式的发票

PDf

Sub Child-Useraccount ，然后显示从后端MySQL nodejs收到的项目

  const [allInvoices, setallInvoices] = useState([]);

// The API call in the useEffect is triggering twice and thats why i am getting two invoices and two record at backend

  useEffect(() => {

 const headers = new Headers();
    headers.append("content-type", "application/json");
const options = {
      method: "POST",
      headers,
      credentials: "include",
      body: JSON.stringify(),
    };

    const newRequest = new Request("http://localhost:5000/api/invoice-all", options);

    (async () => {
      const invoiceFetch = await fetch(newRequest)
        .then((data) => {
 return data.json();
        })
        .then((data1) => {
 setallInvoices(data1);
        })
        .catch();
    })();
  // }, []);
 return <div>{userstatus ? <Useraccount userinfo={userData} userstatus={userstatus} finalBuy={finalBuy} allInvoices={allInvoices} /> : <SigninOptions />}</div>;

Answer 1

我认为 <React.StrictMode>引起了双重执行。从顶级组件中删除后，请查看一下。有关StrictMode双重执行的更多详细信息，请参考This Link。

API调用两次，而useEffect触发一次。 ReactJS / Javascript

1 个答案: