Я создаю проект, в котором, когда пользователь нажимает кнопку buyNow в Basket (child 2), он передает реквизиты обратно родительскому элементу, где он затем передает его другому дочернему элементу в Signin(child 3), где мы вызываем API call (inside useEffect) для обновления базы данных mysql, но кажется, что API call - это called twice, как в database two records, и во внешнем интерфейсе я получил две идентичные записи счетов, но разные имена файлов.
Любые предложения, ребята, почему я сталкиваюсь с этим, обратите внимание, если я удалю оператор useEffect из Signin, он будет непрерывно вызывать API call, поэтому я думаю, что не могу удалить useEffect, кроме этого Я не понимаю, почему это происходит. любое предложение, пожалуйста.
Main (APP)___|
|_Child 1(Home)
|_Child 2 (Basket)
|_Child 3 (signin)(API triggers here)---Sub Child 3-1 (useraccount)
Обновление-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} />}
/>
- Дочерний 3 - Вход , здесь мы вызываем
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) => {
........................................})