React Material-UI Select 未反映更改

编程问答 2022-05-23

问题描述

我有一个包含产品数据的对象列表：

[
    {
        barcode: "21MetaHTAM29RM"
        discount: 0
        price: "359990"
        qty: "2"
        size: "m"
    },{
        barcode: "21MetaHTAM29RL"
        discount: 0
        price: "359990"
        qty: "1"
        size: "l"
    },...
]

我使用 size 字段来显示您可以从中选择产品尺寸的选项：

...

const [prodDetails,setProdDetails] = useState({});

const handleChange = (event) => {
    var specificProd = JSON.parse(event.target.value)
    setProdDetails(specificProd)
};

...

<FormControl className={classes.sizes}>
    <InputLabel htmlFor='size-select'>SIZE</InputLabel>
    <Select
        id='size-select'
        native
        value={prodDetails.size}
        onChange={handleChange}
    >
       {newProd[0].sizepricesdiscountqty.map((item,i)=>{
           if(parseInt(item.qty) > 0){
               return <option key={i} value={JSON.stringify(item)}>
                   {item.size.toupperCase()}
               </option>
           } else {
               return <option disabled key={i}>
                   {item.size.toupperCase()} (OUT OF STOCK)
               </option>
           }
       })}
    </Select>
</FormControl>

我根据数量字段启用或禁用该选项。我将 value 作为对象传递的原因是可能发生多次更改：

enter image description here

enter image description here

在图片中，您可以看到从 21MetaHTAM29RL 到 21MetaHTAM29RM 的条形码更改成功呈现，但无法看到大小。

在类似的线程中，我看到可以在 defaultValue 组件中使用 value 代替 Select，这实际上反映了更改，但它带来了各种其他问题。特别是当我选择另一个产品时，我用来将值设置为数量大于 0 的产品的过滤器将不起作用：

useEffect(()=>{
   setNewProd(product)
   if(product.length > 0){
      for(var i = 0; i < product[0].sizepricesdiscountqty.length; i++){
         if(parseInt(product[0].sizepricesdiscountqty[i].qty) > 0){
            setProdDetails(product[0].sizepricesdiscountqty[i])
            break;
         }
      }
   }
},[product])

它不会遵守过滤条件，defaultValue 不会显示实际设置的产品。 使用 value 而不是 defaultValue 将尊重过滤并设置 qty 大于 0 的第一个产品。

我不太明白 defaultValue 和 value 之间的区别。我尝试同时使用它们，但更改也不会反映出来。 我不知道如何使 Select 组件在更改和尊重过滤时成功重新呈现。有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-uireactjsreactjsreactjsreactjsrerenderselectselectselect