从 ssr 上的 url 参数获取具有 id 的数据

Question

我想从 fetch 中获取数据，但 fetch 中的一个参数是来自实际 URL 的参数。 我正在使用 Nextjs。

这是我的代码：

const Room = () => {
  let fetchData;
  let roomId;

  const getID = () => {
    const router = useRouter();
    const { id } = router.query;
    roomId = id;
    console.log("ID + " + roomId);
  };

  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id=" + roomId)
        .then((response) => response.json())
        .then((data) => (fetchData = data));
    } catch (e) {
      console.error(e);
    }
  };

  getID();
  getDataNames();

  return (
    <div>
      <p>{roomId}</p>
      <p>{fetchData}</p>
    </div>
  );
};

首先我打电话给我未定义的getID() ，然后调用getDataNames()但在 url 中是未定义的参数，因为 roomId 是未定义的。

而且我不知道如何解决它。 但我也不明白为什么函数会被调用两次。 控制台日志

Answer 1

在 React 中，不鼓励在组件体内调用函数。 使用像useEffect这样的钩子会更好。 因此，如果您想在组件加载时调用getID()和getDataNames()一次，您可以编写：

useEffect(() => {
  getID();
  getDataNames();
}, []);

通过这种方式，您可以确定函数将被调用一次。

不仅如此，我还会像这样更改您的代码：

const Room = () => {
  const router = useRouter();
  
  useEffect(() => {
     if (router.asPath !== router.route) {
        getDataNames();
     }
  }, [router]);
  
  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id=" + router.query.id)
      .then((response) => response.json())
      .then((data) => (fetchData = data));
    } catch (e) {
      console.error(e);
   }
  };
  ...

这样就不需要getID() function。