如何在 MERN 堆栈应用程序中使用带有钩子的上下文提供状态数据

如何解决如何在 MERN 堆栈应用程序中使用带有钩子的上下文提供状态数据

我正在尝试提供数据以供说明，并访问一些（就我而言）有关信息的产品。

这里是我更新状态的地方：

const Products = props => {

    const {user,setUser} = useContext(UserContext)
    const {setProduct} = useContext(ProductContext);

    {some code}

 <button className="About" onClick={() => setProduct(product._id)}>About</button>

这是我的 ProductContextProvider：

export const ProductContext = React.createContext({})
const ProductProvider = ProductContext.Provider;

const ProductContextProvider = (props) => {
    const [product,setProduct] = useState({})

    // useEffect(() => {
    //     fetch (`${API}/products/details/${product._id}`,{
    //         method: 'GET',//     })
    //     .then (response => response.json ())
    //     .then (response => {
    //         setProduct(response)
    //         window.location =`/details/${response._id}`
    //     })
    //     .catch (error => {
    //         console.error (error);
    //     })
    // },[])

    return (
        <ProductProvider value={{product,setProduct}}>
            {props.children}
        </ProductProvider>
    )
}   

这里是关于屏幕：

import {ProductContext} from './productContextProvider'

const ProductAbout = () => {

    const {product} = useContext(ProductContext)

    console.log(product,'111111')

    return(
        <div>hi{product.name}</div>
    )
}

export default ProductAbout;

但是由于某种原因，ProductContext 中的这个 useEffect 使我陷入无限循环