立即更新 Map 函数内的状态 React hooks

Question

我尝试了下面的代码，但它在第二次尝试时执行，我想在 Dropdown 函数上执行Alert ，我没有渲染returnCount只是用它来显示警报，

任何人都知道答案请回答这个问题，不要发送任何链接，什么都没有解决，请写下答案

const [arrayList, setArrayList] = useState([
        { Id: 1, Name:'A', ItemDeliveryStatus:4 },
        { Id: 2, Name:'B', ItemDeliveryStatus:4 },
        { Id: 3, Name:'C', ItemDeliveryStatus:4 },
        { Id: 4, Name:'D', ItemDeliveryStatus:4 },
      ])

const [returnCount ,setReturnCount ]=useState(0)

//选择器上的函数，想立即更新returnCount ，以便我可以将其用于以下警报

function displayalertBox(){
arrayList.map(items =>
  {
       if(items.ItemDeliveryStatus=='4')
        {
           setReturnCount(prev=> prev+1)
        }                   
  })

  if(returnCount==4)
   {
       alert('alert as returncount is equal to 4')
   }
}

Answer 1

使用useEffect钩子时，您需要在useEffect内部执行所需的功能。

 const [arrayList, setArrayList] = useState([{ Id: 1, Name: 'A', ItemDeliveryStatus: 4 }, { Id: 2, Name: 'B', ItemDeliveryStatus: 4 }, { Id: 3, Name: 'C', ItemDeliveryStatus: 4 }, { Id: 4, Name: 'D', ItemDeliveryStatus: 4 }, ]) const [returnCount, setReturnCount] = useState(0) function displayalertBox() { arrayList.map(items => { if (items.ItemDeliveryStatus == '4') { setReturnCount(prev => prev + 1) } }) } // You cantry this too if needed. function displayalertBox1() { arrayList.map(items => { if (items.ItemDeliveryStatus == '4') { let count setReturnCount(prev => { count = prev + 1; //since state update is guaranteed, you can try this too. if (count === 4) { alert('alert as returncount is equal to 4') } return count }) } }) } useEffect(() => { if (returnCount == 4) { alert('alert as returncount is equal to 4') } }, [returnCount]);