next.js: 使用来自路由器的参数时，useEffect 触发了两次

Question

我有这个代码

const router = useRouter();
const { pid } = router.query;

useEffect(() => {
        setLoading(true)
        fetch('my/endpoint/' + pid)
            .then((res) => res.json())
            .then((data) => {
                setData(data)
                setLoading(false)
            })
    }, [pid]);

我可以从浏览器控制台看到对 api 的调用，其中 pid = undefined，紧接着又一次调用了实际的 pid 值。如何避免第一次来电？

Answer 1

又脏又快的解决方案，如果定义了pid就控制

const router = useRouter();
const { pid } = router.query;

useEffect(() => {
     if(pid) {
        setLoading(true)
        fetch('my/endpoint/' + pid)
            .then((res) => res.json())
            .then((data) => {
                setData(data)
                setLoading(false)
            })
       }
    }, [pid]);

Answer 2

试试这个：

useEffect(() => {
     if(pid) { // will run if pid is valid
        setLoading(true)
        fetch('my/endpoint/' + pid)
            .then((res) => res.json())
            .then((data) => {
                setData(data)
                setLoading(false)
            })
       }
    }, [pid]);

next.js: 使用来自路由器的参数时，useEffect 触发了两次

next.js: useEffect triggered twice when using param from router

reactjs

next.js

react-hooks