给React Query useMutation传递路径参数的最佳实践探讨

我基于react-query的useMutation写了个自定义Hook，原本是直接传入请求需要的ID，代码如下：

const useMyHook = (id) => {
  return {
    mutationFn: (payload) => {
      return axios.post(`https://some-url/${id}`, payload)
    }
  }
}

但现在这个ID得通过异步流程获取，我纠结两种实现方案：一是把ID存到React state里再传给useMyHook，二是把ID放到mutate的payload里。下面是两种方案的代码示例：

方案一：使用React State #

const MyComponent = () => {
  const [id, setId] = React.useState(null);
  const { mutate } = useMyHook(id);

  getId().then(newId => {
    setId(newId)
    mutate(payload);
  });
}

方案二：将ID放入mutate的payload #

// 注意：修改了Hook实现，用payload中的ID拼接路径
const useMyHook = () => {
  return {
    mutationFn: (payload) => {
      return axios.post(`https://some-url/${payload.id}`, payload)
    }
  }
}

const MyComponent = () => {
  const { mutate } = useMyHook();

  someAsyncronousProcess().then(id => mutate({ ...payload, id }));
}

想请教哪种方案更合适？

两种方案的适用场景 #

• 方案一（React State传ID）：适合ID是组件的核心状态、后续可能需要复用或变更的场景（比如用户切换不同ID进行操作）。但要注意，当id为null时，useMyHook会生成依赖null的mutation实例，直到ID更新后才会生成可用的mutation。如果组件初始化时ID未获取完成，这段时间调用mutate可能会触发错误，需要额外判断id是否存在后再执行。

• 方案二（ID放入payload）：更适合ID仅作为单次请求的临时参数、组件无需将ID作为全局状态维护的场景。这种方式更简洁，无需额外维护state，异步获取到ID后直接拼入payload调用mutate即可，避免了state更新带来的组件重渲染。

推荐选择 #

如果ID仅用于完成当前mutation请求，后续组件不需要再使用该ID，优先选择方案二——代码更精简，减少不必要的状态管理和重渲染开销。

如果ID是组件的关键状态（比如后续需要用该ID发起其他请求、或在页面展示），则方案一更合适，将ID存入state便于后续复用和状态同步。

内容的提问来源于stack exchange，提问作者Cristian Flórez