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

Question

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

任何建议伙计们为什么我会面临这个问题，请注意，如果我从 Signin 中删除 useEffect 语句，它将不断不间断地调用 API call，所以我认为我无法删除 useEffect，除此之外，我不明白为什么会这样。请有任何建议。

Main (APP)___|
             |_Child 1(Home)
             |_Child 2 (Basket)
             |_Child 3 (signin)(API triggers here)---Sub Child 3-1 (useraccount)

Update-1： 删除 strictMode 后，它确实解决了问题，但这是否意味着我暂时修复了问题，或者我必须使用 stricMode 并找到真正的问题

• 孩子 2- 篮子- 客户按下 buyNow 按钮，它会触发 resetBasket 功能

     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>

• 主应用 resetBasket 获取购物篮并传递给父元素

      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} />}
                />

• Child 3 - Signin，这里我们调用API call(using useEffect)并更新Mysql服务器并从后端接收PDf格式的发票

  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>;

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

     // here the return is showing two different invoices of same items bought i.e two times the API is being called
    return (
    allInvoices.map((eachInvoice, index) => {
    ........................................})

Answer 1

我认为 <React.StrictMode> 导致双重执行。请在将其从顶级组件中删除后查看。 有关 StrictMode 双重执行的更多详细信息，请参阅This Link。