时间戳

首页 > 解决方案 > 设置变体选项数组时出错无法读取未定义的属性“0”

javascript - 设置变体选项数组时出错无法读取未定义的属性“0”

问题描述

你好，我在我的检查仪表板上创建了一家电子商务商店，我设置了大小的变体，但当我尝试在选项数组上实现选项下拉时，我收到错误无法读取 line12 中未定义的属性“0”，即让 finalSizeArray = props。 product.variants[0].options.map(option =

产品卡.js

import React, { useState, useEffect } from 'react';
import { Card, Image, Button, Icon, Dropdown } from 'semantic-ui-react';

const ProductCard = (props) => {
     console.log(props.product, 'props from Container')

    const [sizes, setSizes] = useState([])
    const [variantInfo, setVariantInfo] = useState()

    useEffect(() => {        
        
       let finalSizeArray = props.product.variants[0].options.map(option => {
            let sizeInfo = {}

           sizeInfo.key = option.name
           sizeInfo.text = option.name
           sizeInfo.value = option.id

            return sizeInfo
        })

        setSizes(finalSizeArray)
    }, [])

    const handleSize = (e, {value}) => {
        setVariantInfo({[props.product.variants[0].id]: value})
    }

    const handleButtonAddCart = e => {
        e.preventDefault()
        props.addToCart(props.product.id, variantInfo)
        
        
        // Funtion to Clear Select Input for Dropdown - Needs work. 
        // let selectInput = document.querySelectorAll('.sizes-drop')
        // selectInput.forEach((input,i) => {
        //     input.children[0].innerHTML = 'Select Size'
        //     // input.children[0].classList.add('default')
        // })
    }

    return (
        <Card>
            <Image src={props.product.media.source} />
            <Card.Content>
                <Card.Header>{props.product.name}</Card.Header>
                <Card.Meta>{props.product.price.formatted_with_symbol}</Card.Meta>
                <Card.Description>{props.product.description.replace(/(<([^>]+)>)/ig,"")}</Card.Description>
                <Dropdown
                    className="sizes-drop"
                    
                    
                   fluid
                   placeholder='Select Size'
                   selection
                   options={sizes}
                />
                <Button fluid className='add-button' onClick={handleButtonAddCart}>
                    Add to Cart
                    <Icon name='arrow right' />
                </Button>
            </Card.Content>
        </Card>
    );
};

export default ProductCard;

标签： javascriptreactjssemantic-ui

解决方案

我认为这是因为您的道具尚未加载...您可以像这样处理您的代码

useEffect(() => {        
   let finalSizeArray = props?.product?.variants[0]?.options?.map(option => {
      let sizeInfo = {}

      sizeInfo.key = option.name
      sizeInfo.text = option.name
      sizeInfo.value = option.id

      return sizeInfo
   })

   setSizes(finalSizeArray)
}, [])

推荐阅读