传递到端点的变量正在返回值并同时取消定义

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

所以我有这段代码，将 subscriptionDuration 和 menuId 作为查询参数传递给端点

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

然后我在这里保存订阅持续时间：

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

因此，我像上面一样进行 API 调用，在浏览器开发工具的网络选项卡中，调用返回两次，其中一个调用将 subscriptionDuration 显示为“每周”，而另一个调用将其显示为“未定义”见下图：

因此，由于调用显示为未定义，我用来渲染屏幕的响应显示为空。看看我的

useEffect

，您会发现我尝试在控制台中检查

subscriptionDuration

的值，它在控制台中的同一行代码上返回“每周”和“未定义”。如果我能得到任何形式的帮助，我将不胜感激。

Answer 1

所以我解决了这个问题。我已经在代码的另一个位置设置了订阅持续时间来处理其他事情，所以我猜它们正在相互影响，因为我试图将相同的值传递到端点。因此，我所做的是使用另一个选择输入为订阅持续时间创建另一个使用状态，并将该值传递到端点。我不太明白发生了什么，也无法给出详细的表达，但我的代码现在可以工作了。