Блог

он удаляет все объекты из массива вместо обновления, хочет обновить «ItemDeliveryStatus» всех объектов внутри функции карты

 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 [returnCount, setReturnCount ]=useState(0)


const update= (value)=>
{

 arrDeliveryDetails.map(items => 
                {
                    
                    if(items.ItemDeliveryStatus==1)
                    {
                        
                        setArrDeliveryDetails({...items, ItemDeliveryStatus:value})
                    }

                    if (items.ItemDeliveryStatus==4)
                    {
                        setReturnCount(prev=>prev 1)                        
                    }
                })  


console.log(arrDeliveryDetails)
}

 

Проблема здесь заключается в том, что в цикле ставится в очередь несколько обновлений состояния, каждое последующее обновление отменяет/перезаписывает предыдущее обновление. Вы можете решить эту проблему с помощью обновления функционального состояния. Вы также должны использовать array.forEach , так как вы не сопоставляете arrDeliveryDetails новый массив, а вместо этого вызываете обратный вызов для каждого элемента, чтобы обновить состояние компонента.

 const update = (value) => {
  arrDeliveryDetails.forEach(item => {
    if (item.ItemDeliveryStatus === 1) {
      setArrDeliveryDetails(items => ({
        ...items,
        ItemDeliveryStatus: value,
      }));
    }

    if (item.ItemDeliveryStatus === 4) {
      setReturnCount(count => count   1);                      
    }
  });
}
 

Поскольку обновления состояния реакции обрабатываются асинхронно, если вы хотите зарегистрировать обновленное состояние, сделайте это в useEffect соединении с соответствующей зависимостью.

 useEffect(() => {
  console.log(arrDeliveryDetails);
}, [arrDeliveryDetails]);