传递给接口的参数同时返回有效值与undefined的问题求助

问题场景 #

在React项目中，使用useState将subscriptionDuration初始化为'Weekly'，并在useEffect中调用接口传递该参数，但浏览器网络面板显示API被调用两次：一次参数为"Weekly"，另一次为undefined，导致页面渲染数据为null；同时useEffect中的console.log也输出了"Weekly"和undefined。

相关代码片段：

接口调用函数 #

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

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

状态初始化 #

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

useEffect调用逻辑 #

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

排查方向与解决方案 #

1. 检查subscriptionDuration的修改逻辑 #

全局搜索项目中所有调用setSubscriptionDuration的代码，确认是否存在意外将其设置为undefined的情况：

• 比如异步回调、事件处理函数中传入了未校验的变量
• 错误的条件判断导致执行了setSubscriptionDuration(undefined)

修复示例：给状态更新添加默认值兜底

// 避免传入undefined
setSubscriptionDuration(newValue || 'Weekly');

2. 在useEffect中添加参数校验 #

在调用接口前，先校验subscriptionDuration、menu和subscriptionStore的有效性，避免无效的接口调用：

useEffect(() => {
    console.log('subscriptionDuration', subscriptionDuration);
    // 仅当参数全部有效时调用接口
    if (subscriptionDuration && menu && subscriptionStore) {
        subscriptionStore.getFoodTemplate(subscriptionDuration, menu);
    }
    kitchenStore?.getKitchen();
    menuStore?.getMenu();
    kitchenId && foodStore?.getFood(kitchenId);
}, [subscriptionStore, subscriptionDuration, menu, kitchenStore, foodStore, kitchenId]);

3. 排查React Strict Mode的影响 #

开发环境下，React Strict Mode会强制组件和useEffect执行两次，但正常情况下不会导致subscriptionDuration变为undefined。可以临时移除index.js中的<React.StrictMode>包裹进行测试：

• 如果移除后问题消失，说明是Strict Mode的双重渲染，但此时两次调用的参数都应为'Weekly'，若仍有undefined则需回到步骤1排查状态修改逻辑
• 生产环境下Strict Mode会自动禁用，无需担心线上问题

4. 在接口函数中添加参数兜底 #

即使前端传入无效值，也在getFoodTemplate内部做参数校验和兜底，避免传递undefined给后端接口：

getFoodTemplate(subscriptionDuration:any, menuId:any) {
    // 参数兜底，确保不会传递undefined
    const validDuration = subscriptionDuration ?? 'Weekly';
    const validMenuId = menuId ?? ''; // 根据业务需求设置合理默认值
    const request = createAxiosInstance(this.token);
    runInAction(() => (this.loading.getFoodTemplate = true));

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

5. 检查subscriptionStore的初始化逻辑 #

如果subscriptionStore是通过useContext或状态管理库（如MobX、Redux）获取的，确认其是否初始为undefined，后续才加载完成。这种情况下useEffect会触发两次：

• 第一次subscriptionStore为undefined，不会执行接口调用
• 第二次subscriptionStore加载完成，执行调用

但这种情况不会导致subscriptionDuration变为undefined，若仍出现该问题，需回到步骤1排查状态修改逻辑。

内容的提问来源于stack exchange，提问作者Olaoluwa Anigboro-Napoleon