javascript - 有没有更好的方法通过对 API 的异步调用来组织这个 React 页面？

Question

我有这个useEffect应该只运行一次。因此，我已将其设置router.query.something为依赖项。请求必须等待router.query.something被水合，然后只有在值是真实的情况下才会发出请求。

这似乎是一个过于复杂的函数来向 API 发出一个简单的一次性请求，但我还没有找到一种更简洁的方法来做到这一点。

const MyPage = () => {
  const [user, setUser] = useState(null)
  const router = useRouter()

  useEffect(async () => {
    try {
      if (router.query.something) {
        const res = await api.get(`/resetTokens/${router.query.something}`)
        setUser(res.data)
      }
    } catch (err) {
      setUser(null)
    }
  }, [router.query.something])

  return (<div>...</div>)
}

通常，我会使用getServerSideProps，但在这种情况下，我不能，因为请求正在设置 cookie。如果我使用getServerSidePropscookie 不会传递给客户端。

标签： javascriptreactjs

Answer 1

const MyPage = () => {
    const [user, setUser] = useState(null)
    const router = useRouter()

    useEffect(() => {
        const abortController = new AbortController();

        const fetchData = async () => {
            try {
                const res = fetch(`/resetTokens/${router.query.resetToken}`, { signal: abortController.signal });
                setUser(res.data)
            } catch (e) {
                setUser(null)
            }
        };
        
        if (router.query.something) {
            fetchData();
        }

        return () => {
            abortController.abort();
        };
    }, [router.query.something]);

    return (<div>...</div>)
}