mongoose 如何使用户设置立即生效更改？

hfsqlsce 于 2023-02-04 发布在 Go

关注(0)|答案(2)|浏览(104)

我做一个电子商务网站，我试图显示与产品的详细信息的页面：

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import axios from "axios";

import Layout from "../components/Layout";

const ProductPage = () => {
const router = useRouter();
const [product, setProduct] = useState({});
const [loading, setLoading] = useState(true);

useEffect(() => {
  const fetchProduct = async () => {
    try {
      const response = await axios.get(`/api/products?id=${router.query.id}`);
      const currentProduct = response.data;
      setLoading(false);
      setProduct(currentProduct);
    } catch (error) {
      console.error(error);
    }
  };
  fetchProduct();
}, [router.query.id]);

return (
  
<Layout title={product.name}>
{loading ? (
<div className="text-center">Loading...</div>
) : (
<div className="max-w-lg mx-auto p-5">
<h1 className="text-2xl font-bold mb-5">{product.name}</h1>
<img
         src={product.imageUrl}
         alt={product.name}
         className="w-full mb-5"
       />
<p className="mb-5">{product.description}</p>
<p className="text-xl font-bold mb-5">
Price: {product.price}
</p>
<Link href="/" legacyBehavior>
<a className="btn btn-primary">Go back to the products list</a>
</Link>
</div>
)}
</Layout>
);
};

export default ProductPage;

价值观因此我放置了一些console.log当我将console.log放在"try"产品中时，将返回一个空对象;当我将console.log放在useffect之后时，产品将返回一个包含我的值的对象

mongoose

来源：https://stackoverflow.com/questions/75342404/how-to-make-set-on-useffect-change-immediately

2条答案

按热度按时间

r6hnlfcb1#

当“product”状态完成设置时，您需要将“isLoading”状态设置为false。为此，您需要再添加1个useEffect来侦听产品状态的更改，为此，您必须将“product”状态添加为useEffect的依赖项。
尝试下一个代码：

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import axios from "axios";

import Layout from "../components/Layout";

const ProductPage = () => {
  const router = useRouter();
  const [product, setProduct] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await axios.get(`/api/products?id=${router.query.id}`);
        const currentProduct = response.data;
        setProduct(currentProduct);
      } catch (error) {
        console.error(error);
      }
    };
    fetchProduct();
  }, [router.query.id]);

  useEffect(() => {
    setLoading(false);
  }, [product]);

  return (
    <Layout title={product.name}>
      {loading ? (
        <div className="text-center">Loading...</div>
      ) : (
        <div className="max-w-lg mx-auto p-5">
          <h1 className="text-2xl font-bold mb-5">{product.name}</h1>
          <img
            src={product.imageUrl}
            alt={product.name}
            className="w-full mb-5"
          />
          <p className="mb-5">{product.description}</p>
          <p className="text-xl font-bold mb-5">Price: {product.price}</p>
          <Link href="/" legacyBehavior>
            <a className="btn btn-primary">Go back to the products list</a>
          </Link>
        </div>
      )}
    </Layout>
  );
};

export default ProductPage;

赞(0）回复(0）举报 2023-02-04

brc7rcf02#

useState钩子不会立即更新状态值，当你改变状态时会有很多事情发生，比如批处理状态更新，重新计算DOM操作，重新渲染组件等等。
如果你想知道你的状态是什么，记录你传递给setProduct函数的参数，你也可以使用React开发工具。

赞(0）回复(0）举报 2023-02-04