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

Question

在使用像我这样的局部变量时，我可以为映射列表中的产品设置 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。

Answer 1

好吧，您没有将 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)}