Variable passed to endpoint is returning value and undefine simultaneously

Question

getFoodTemplate(subscriptionDuration:any, menuId:any) {
    const request = createAxiosInstance(this.token);
    runInAction(() => (this.loading.getFoodTemplate = true));

    request`enter code here`
      .get(
        `${BaseDirectories.API_BASE_URL}/api/v1/food-subscription-templates/all-food-subscription-templates?subscriptionDuration=${subscriptionDuration}&menuId=${menuId}`,
      )
      .then((res) => {
        runInAction(() => (this.loading.getFoodTemplate = false));
        this.setFoodTemplate(res.data.data);
      })
      .catch((error) => {
        runInAction(() => (this.loading.getFoodTemplate = false));
        return ErrorHandler(error);
      });
}

So I have this code where I am passing subscriptionDuration and menuId as query parameters to an endpoint

const [subscriptionDuration, setSubscriptionDuration] = useState('Weekly');

and then I am saving subscriptionDuration here:

    useEffect(() => {
    console.log('subscriptionDuration', subscriptionDuration)
    subscriptionStore?.getFoodTemplate(subscriptionDuration, menu);
    kitchenStore?.getKitchen();
    menuStore?.getMenu();
    kitchenId && foodStore?.getFood(kitchenId);
  }, [subscriptionStore, subscriptionDuration, menu, kitchenStore, foodStore, kitchenId]);

So I make the API call like what is above and in my network tab in my browser devtool the call is returning twice, one of the call is showing subscriptionDuration as "Weekly" while the other is showing it as "undefined" as can be seen below:

So because of the call that is showing as undefined, the response that I am using to render the screen is showing as null. Looking at my useEffect, you will see that I tried to check the value of subscriptionDuration in a console and it returned "weekly" and "undefined" in the console both on the same line of code. I'd appreciate any form of help that I can get.

Answer 1

So I fixed the issue. I already set the subscription duration in another place of the code to handle something else so I guess they were affecting each other since I am trying to pass that same value to an endpoint. So what I did was create another usestate for subscriptionduration with another select input and pass that value to the endpoint. I don't understand what's going on much and I can't really give a detailed expression but my code works now.

So like I said earlier, I really do not understand too deep why the initial subscriptionDuration is not working with the api but I created a new select input which can be seen below -

<Select
      onChange={(e) => setSubDuration(e.target.value)}
      value={subDuration}
    >
      <option value="Weekly">Weekly</option>
      <option value="Monthly">Monthly</option>
    </Select>

also created a new usestate variable and set the new subDuration to the value of the select and then passed it to the API and that worked. I do not know if I could have still used the previous subscriptionDuration maybe by tweaking some things but this new one worked for me