为什么组件在reactJS上没有条件渲染

Question

所以我用

<Link>

标签包装了一个组件。因此，当我单击它时，网址将按预期更改为 /product/1。

我的路由器代码..

{
        path: "/",
        element: <App />,
        children: [
            {
                path: "/product/:productId",
                element: <ListingDetailsPage />
            }
      

在 ListingDetailsPage 组件上，我可以看到 API 调用正在发生并收到正确的响应，但我在屏幕上没有看到任何变化。

列表详情页.tsx

export default function () {

    const { productId } = useParams();
    const [product, setProduct] = useState<Product | null>(null);

    useState(() => {
      console.log({productId});
      async function fetchProduct() {
        const prod = await getProductsOrProductDetails(`${import.meta.env.VITE_PRODUCT_URL}/${productId}`);
        console.log("Product Details ", prod);
        if (prod) {
          setProduct(prod);
        }
      }
      fetchProduct();
    }, [productId]);

    return <>
        <div>
            {product ? <ListingCardDetails product={product} /> : <h1>No Product</h1>}
        </div>
    </>
}

不知道为什么屏幕上没有任何变化。有人可以帮忙吗？？

Answer 1

如上所述，将

useState

替换为

useEffect

，以便每次

productId

发生变化时调用一次：

useEffect(() => {
      console.log({productId});
      async function fetchProduct() {
        const prod = await getProductsOrProductDetails(`${import.meta.env.VITE_PRODUCT_URL}/${productId}`);
        console.log("Product Details ", prod);
        if (prod) {
          setProduct(prod);
        }
      }
      fetchProduct();
    }, [productId]);