javascript - 无法设置单个对象的属性

在使用像我以前使用的局部变量时，我可以为映射列表中的产品设置sizeSelect并由于sizeSelect更改而将另一个产品添加到购物车中。我想为列表中的每个产品提供一个自己的sizeSelect值。

class Men extends React.Component {

    render(){

        let sizeSelect=null;

        return (
            <div>
            <div className="productGrid">
            {this.props.products.map((x)=>x.men ?
            <div>
            {<img src={x.picture.file} alt="Product" style={{width:'250px'}}></img>}
            <div>
                <select onChange={(e)=>{sizeSelect=e.target.value}}>
                    <option>Select</option>
                    <option> S </option>
                    <option> M </option>
                    <option> L </option>
                    <option> XL </option>
                </select>
            </div>
            <div>{<button onClick={(e)=>{this.props.addToCart({x})}}>Add To Cart</button>}
            </div>
            </div>:null)}
            </div>
            </div>
        )
    }
}


//This is the condition in addToCart function.
if (product.sizeSelect !== null && product.sizeSelect !== "Select") {
...
}

在为列表中的每个产品提供其自己的sizeSelect值时，您将无法选择一个产品的尺寸并将另一产品添加到购物车，因为该产品的sizeSelect属性仍然为null。

最佳答案

好吧，您没有将prop添加到您的x对象中，需要在map函数中对其进行分配：

{this.props.products.map((x)=>x.men ?
            <div>
            {<img src={x.picture.file} alt="Product" style={{width:'250px'}}></img>}
            <div>
                <select onChange={(e)=>{x.sizeSelect=e.target.value}}> // Assign prop to 'x' here
                    <option>Select</option>
                    <option> S </option>
                    <option> M </option>
                    <option> L </option>
                    <option> XL </option>
                </select>
            </div>
            <div>{<button onClick={(e)=>{this.props.addToCart({x})}}>Add To Cart</button>}
            </div>
            </div>:null)}

关于javascript - 无法设置单个对象的属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57534897/