如何修复使用useEffect React Hook时缺少依赖项警告

Question

在 React 18.3.1 中，当我尝试阻止获取请求出现无限循环时，出现此错误：

src\pages\ItemDetail.js
第16:8行：React Hook useEffect缺少依赖项：'id'。删除依赖项数组react-hooks/exhaustive-deps

跳过依赖数组react-hooks/exhaustive-deps

export default function ItemDetail({ cartItems, setCartitems }) {

    const [product, setProduct] = useState(null);
    const [qty, setQty] = useState(1);
    const { id } = useParams();

    useEffect(() => {
        
        fetch(process.env.REACT_APP_URL + "/product/" + id)
            .then(res => res.json())
            .then(res => setProduct(res.product))
    }, [])

Answer 1

简短的答案是，您需要将

id

添加到钩子依赖项列表中。

但我认为你所说的“尝试防止无限循环”的意思是你故意删除它？

如 hooks 文档 中所述，您不应该“使用 Effects 来编排应用程序的数据流”。你只会遇到问题，相信我，我们都经历过。 😆

如果您需要获取数据，我建议使用

react-query

，它的设计正是为了做到这一点。 https://tanstack.com/query/latest

我知道有大量的示例显示了

useEffect

中的 fetch，虽然这是可能的，但最好使用专门解决此任务的解决方案。