ReactJS API集成问题：priorityId未定义时避免重复404错误

针对当前场景，核心问题是priorityId为undefined时生成了无效API路径（出现//），导致反复触发错误请求。以下是三种可行解决方案：

方案一：UI层条件控制请求触发 #

在调用useEndpointData前判断priorityId是否有效，仅当参数存在时发起请求，否则返回初始状态：

// 修复路径中的多余斜杠，仅当priorityId存在时生成有效路径
const value = useEndpointData(
  priorityId ? `/v1/getPriorityById/${priorityId}` : '',
  undefined,
  // 当priorityId不存在时，设置初始状态避免加载态和错误提示
  priorityId ? undefined : { loading: false, data: null }
);

也可配合useEffect监听priorityId变化，手动控制请求时机：

const { reload, ...state } = useEndpointData(
  `/v1/getPriorityById/${priorityId || ''}`,
  undefined,
  { loading: false, data: null }
);

useEffect(() => {
  if (priorityId) {
    reload();
  }
}, [priorityId, reload]);

方案二：修改useEndpointData Hook，内置参数校验 #

直接在Hook内部添加逻辑，检测到必要参数缺失时跳过请求并返回初始状态：

export const useEndpointData = <TPath extends PathFor<'GET'>>(
  endpoint: TPath,
  params?: OperationParams<'GET', MatchPathPattern<TPath>>,
  initialValue?: Serialized<OperationResult<'GET', MatchPathPattern<TPath>>> | (() => Serialized<OperationResult<'GET', MatchPathPattern<TPath>>>)
): AsyncState<Serialized<OperationResult<'GET', MatchPathPattern<TPath>>>> & {reload: () => void} => {
  deprecationWarning({ endpoint, params, initialValue });
  const { resolve, reject, reset, ...state } = useAsyncState(initialValue);
  const dispatchToastMessage = useToastMessageDispatch();
  const getData = useEndpoint('GET', endpoint);
  
  const fetchData = useCallback(() => {
    // 检查路径是否包含无效占位符或参数缺失
    const hasInvalidPath = endpoint.includes('//') || !priorityId;
    if (hasInvalidPath) {
      reset();
      // 返回初始值，跳过错误请求
      resolve(initialValue || { data: null, loading: false });
      return;
    }
    
    reset();
    getData(params as any).then(resolve).catch((error) => {
      console.error(error);
      dispatchToastMessage({
        type: 'error',
        message: error,
      });
      reject(error);
    });
  }, [reset, getData, params, resolve, dispatchToastMessage, reject, endpoint, priorityId]);
  
  useEffect(() => {
    fetchData();
  }, [fetchData]);
  
  return {
    ...state,
    reload: fetchData,
  };
};

方案三：优化路径生成逻辑，避免无效路径 #

修改路径拼接方式，确保只有priorityId存在时才生成完整路径，否则返回空路径：

// 条件拼接路径，从根源避免无效的//
const endpoint = priorityId ? `/v1/getPriorityById/${priorityId}` : '';
const value = useEndpointData(endpoint, undefined, { loading: false, data: null });

这种方式配合Hook对空路径的默认处理（若支持），可直接阻止错误请求触发。

内容的提问来源于stack exchange，提问作者Lakshmi Praneeth