无法读取未定义的属性（读取“defaultSize”）答案

【问题标题】：Cannot read properties of undefined (reading 'defaultSize')无法读取未定义的属性（读取“defaultSize”）
【发布时间】：2021-12-17 17:40:13
【问题描述】：

我正在尝试在我的 MERN 项目中使用状态，并且我在 MongoDB 中定义了 defaultSize，并且正在尝试通过 product.defaultSize 使用状态。如果我更改我的一些代码（例如添加 console.log("hello")）并保存它，错误就会消失并正常加载。但是如果我刷新页面，错误又回来了？

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>
)};

我也尝试将其更改为useState(product?.defaultSize);，因为我在这里看到另一篇帖子说这可以工作，但我没有运气。如您所知，所有其他 product.otherstuff 都可以正常工作。任何帮助将不胜感激！

【问题讨论】：

product.otherstuff 工作正常，因为您首先检查它是否真实（product &&）。 product 最初必须是未定义的，您需要考虑它。
nullsafe 版本到底有什么问题？只是它没有使用正确的初始值？
我不确定为什么它不起作用，我认为这是因为product.defaultSize 是一个 3D 模型的 URL。 ? 可能使它成为无效的 URL？我对 React 还很陌生，所以到目前为止，我的所有代码都是自学的，并且经过了很多试验和错误。我也尝试添加 const product = product.defaultSize' 然后使用 useState(product) 但这仍然不起作用。
a || b 表示使用a 除非它是虚假的，在这种情况下使用b 代替。问题是[] 被认为是真实的，而不是虚假的，所以product.defaultSize 将永远被使用。也许你的意思是product.defaultSize || []？
developer.mozilla.org/en-US/docs/Glossary/Truthy

标签： javascript reactjs mern

【解决方案1】：

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>
)};

【讨论】：