Estoy tratando de usar Estado en mi proyecto MERN, y tengo un tamaño predeterminado definido en MongoDB, y estoy tratando de usar Estado por product.defaultSize . tamaño predeterminado. Si cambio parte de mi código (como agregar console.log ("hola")) y lo guardo, el error desaparece y se carga correctamente. Pero si actualizo la página, ¿vuelve el error?
import { useEffect, useState } from "react"; import { getProductDetails } from "../redux/actions/productActions"; import { SizeOptions } from '../components/SizeOptions'; const ProductScreen = ({match}) => { const dispatch = useDispatch(); const productDetails = useSelector(state => state.getProductDetails); const { loading, error, product } = productDetails; const [ src, setSrc ] = useState(product.defaultSize); useEffect(() => { if (product && match.params.id !== product._id) { dispatch(getProductDetails(match.params.id)); } }, [dispatch, match, product]); <div className='sizebuttons'> {product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} changeSrc={src => setSrc(src)}/>))} </div> return ( <model-viewer id="model-viewer" src={src} alt={product.productName} ar ar-modes="scene-viewer quick-look" ar-placement="floor" shadow-intensity="1" camera-controls min-camera-orbit={product.mincameraorbit} max-camera-orbit={product.maxcameraorbit} interaction-prompt="none"> <button slot="ar-button" className="ar-button"> View in your space </button> </model-viewer> )}; También intenté cambiarlo a useState(product?.defaultSize); como vi otra publicación aquí que decía que podría funcionar, pero no tuve suerte con eso. Y como puede ver, todos los demás product.otherstuff funcionan bien. ¡Cualquier ayuda sería muy apreciada!
import { useEffect, useState } from "react"; import { getProductDetails } from "../redux/actions/productActions"; import { SizeOptions } from '../components/SizeOptions'; const ProductScreen = ({match}) => { const dispatch = useDispatch(); const productDetails = useSelector(state => state.getProductDetails); const { loading, error, product } = productDetails; const [ src, setSrc ] = useState(); useEffect(() => { if (product && match.params.id !== product._id) { dispatch(getProductDetails(match.params.id)); } }, [dispatch, match, product]); <div className='sizebuttons'> {product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} changeSrc={src => setSrc(src)}/>))} </div> return ( <model-viewer id="model-viewer" src={src || product.defaultSize} alt={product.productName} ar ar-modes="scene-viewer quick-look" ar-placement="floor" shadow-intensity="1" camera-controls min-camera-orbit={product.mincameraorbit} max-camera-orbit={product.maxcameraorbit} interaction-prompt="none"> <button slot="ar-button" className="ar-button"> View in your space </button> </model-viewer> )};