javascript—从在react native外部呈现的另一个下拉列表中，在map函数内部一次性更改所有下拉列表的值

（有4个下拉列表），如果外部下拉列表值更改为“已完成”，则所有四个下拉列表值应使用“项目交付状态”更改为“已完成”。如果项目交付状态等于1，则应将所有下拉列表值更改为“待定”；如果项目交付状态等于2，则应将所有下拉列表值更改为“已交付”，

const [pendingCount,setPendingCount]=useState(0)
    const [deliveredCount ,setDeliveredCount ]=useState(0)    
    const [completedCount,setCompletedCount]=useState(0)
    const [returnedCount ,setReturnedCount ]=useState(0)

const [arrDeliveryDetails, setArrDeliveryDetails] = useState([
    { id: 1,  ItemName:'A', ItemDeliveryStatus:1},
    { id: 2,  ItemName:'B', ItemDeliveryStatus:1},
    { id: 3,  ItemName:'C', ItemDeliveryStatus:1},
    { id: 4,  ItemName:'D', ItemDeliveryStatus:1},
  ])

const updateSingleStatus= (key,value)=>
 {  
        setPendingCount(0)
        setDeliveredCount(0)
        setCompletedCount(0)
        setReturnedCount(0)

        let update = [...arrDeliveryDetails]
        update[key] = {...update[key], ItemDeliveryStatus:value}
        setArrDeliveryDetails(update)

        update.map((items)=>{ 
           if(items.ItemDeliveryStatus=="1" ){
               setPendingCount(prev=>prev+1)

           }else if(items.ItemDeliveryStatus=="2" ){
                setDeliveredCount(prev=>prev+1)

            }else if(items.ItemDeliveryStatus=="3"){
                setCompletedCount(prev=>prev+1)

           }else {
                setReturnedCount(prev=>prev+1)

           }
        })

}

const updateAllStatus=(value)=>
{

  if(value==2)
  {
   let updateAllItemDeliveryStatus=arrDeliveryDetails.map(items=> 
                         ({...items,itemDeliveryStatus:2}))

      setArrDeliveryDetails(updateAllItemDeliveryStatus)
  }
}

return(
 <>
        {
          arrDeliveryDetails.map((items,index)=>(                            
             <View key={index}>  
                 <Text>{items.ItemName}</Text>       
                <Picker mode="dropdown" onValueChange={(value)=>updateSingleStatus(index,value)} >        
                    <Picker.Item  label='Pending'    value='1' />
                    <Picker.Item  label='Delivered'  value='2' />
                    <Picker.Item  label='Completed'  value='3' />   
                   <Picker.Item  label='Returned'   value='4' /> 
                 </Picker>                             
              </View>
           ))                             
        }

            <Picker mode="dropdown" onValueChange={(value)=>updateAllStatus(index,value)} >        
                <Picker.Item  label='Pending'    value='1' />
                <Picker.Item  label='Delivered'  value='2' />
                <Picker.Item  label='Completed'  value='3' />   
                <Picker.Item  label='Returned'   value='4' /> 
             </Picker> 

     <Text style={pstyles.billtxt}>PendingCount: {pendingCount}  </Text>
     <Text style={pstyles.billtxt}>DeliveredCount : {deliveredCount}  </Text>
     <Text style={pstyles.billtxt}>CompletedCount : {completedCount}  </Text>
     <Text style={pstyles.billtxt}>ReturnedCount : {returnedCount}  </Text>
 </>

)

如果要更新所有下拉列表，可以尝试以下方法。

const updateAllStatus=(value)=>
{
    let updateAllItemDeliveryStatus = []
    switch (value) {
        case '1':
            updateAllItemDeliveryStatus = arrDeliveryDetails.map(items => ({...items, itemDeliveryStatus: 1 }))
            break
        case '2':
            updateAllItemDeliveryStatus = arrDeliveryDetails.map(items => ({...items, itemDeliveryStatus: 2 }))
            break
        case '3':
            updateAllItemDeliveryStatus = arrDeliveryDetails.map(items => ({...items, itemDeliveryStatus: 3 }))
            break
        case '4':
            updateAllItemDeliveryStatus = arrDeliveryDetails.map(items => ({...items, itemDeliveryStatus: 4 }))
            break
        default:
            updateAllItemDeliveryStatus = [ ...arrDeliveryDetails ]
    }
    setArrDeliveryDetails(updateAllItemDeliveryStatus)
}

代码中有一个错误，您正在用数字检查值，但原始值是字符串格式。

javascript—从在react native外部呈现的另一个下拉列表中，在map函数内部一次性更改所有下拉列表的值

1条答案

相关问题

热门标签

最新问答