在 React 和 Express 中处理查询答案

【问题标题】：Handling query in React and Express在 React 和 Express 中处理查询
【发布时间】：2020-11-12 08:01:35
【问题描述】：

在我的 React 应用程序的某个地方，我使用 REST API 向服务器发送请求。在我的 URL 中，我想使用查询（在 postIconsTransition method 中），但是当我向服务器发送请求时，服务器告诉我找不到这个 URL（我在我的服务器中构建了这个错误）。如果我在没有任何查询的情况下使用此 URL，则 postIconsTransition method 中的请求可以正常工作。 postId 和 authContext.userId 工作正常，谁能告诉我我的代码有什么问题？

在我发送请求的组件中：

  const likeHandler = async () => {
    setLike(prevState => !prevState);

    if (!like) {
      try {
        await postIconsTransition(props.postId, "inc");
      } catch (error) {}
    } else {
      try {
        await postIconsTransition(props.postId, "dec");
      } catch (error) {}
    }
  };

在useHttp.js 组件中：

  const postIconsTransition = async (postId, addtionAddress) => {
    return await transitionData(
      `http://localhost:5000/post/${postId}/${authContext.userId}?t=${addtionAddress}`,
      "POST",
      null,
      { Authorization: `Bearer ${authContext.token}` }
    );
  };

transitionData 方法：

  const transitionData = useCallback(
    async (url, method = "GET", body = null, headers = {}) => {
      setIsLoading(true);
      const abortController = new AbortController();
      activeHttpRequest.current.push(abortController);

      try {
        const response = await fetch(url, {
          method,
          body,
          headers,
          signal: abortController.signal
        });

        const responseData = await response.json();

        activeHttpRequest.current = activeHttpRequest.current.filter(
          reqCtrl => reqCtrl !== abortController
        );

        if (!response.ok) {
          throw new Error(responseData.message);
        }

        setIsLoading(false);
        return responseData;
      } catch (error) {
        modalContext.err(error);
        setIsLoading(false);
        throw error;
      }
    },
    [modalContext.err]
  );

快递：

router.post(
  "/:postId/:userId?t=inc",
  tokenChecker,
  postController.updateLikesComments
);

router.post(
  "/:postId/:userId?t=dec",
  tokenChecker,
  postController.updateLikesComments
);

所有这些都可以正常工作，但是当我在 URL 中使用查询时，它不再工作了。

【问题讨论】：

两个端点是相同的路径。您应该检查路由处理程序中的查询参数并根据它的值采取行动。
只有一个路由/:postId/:userId，然后查看handler里面的查询参数。
我认为您不能将查询参数放在您的快速路线中。要么改用"/:postId/:userId/inc"，要么使用"/:postId/:userId" 并在里面检查req.params.t。
我知道您是新用户。请检查 stackoverflow 用户指南，并请检查此。 meta.stackoverflow.com/questions/258004/…
stackoverflow.com/users/3001761/jonrsharpe 谢谢。

标签： javascript node.js reactjs rest express

【解决方案1】：

您不会在这样的快速路由中指定查询参数。只是发送它们。 Express 可以阅读。

router.post(
  "/:postId/:userId",
  tokenChecker,
  postController.updateLikesComments
);

// Notice that you don't need the other one.

在你的控制器中检查参数

// controller's code

const t = req.query.t;

if (t === 'inc') {
 // do what you want here
}

if (t === 'dec') {
 // do what you want here
}

【讨论】：

stackoverflow.com/users/10530420/mansur 谢谢老兄。