Question

我尝试使用以下代码，但它在第二次尝试时正在执行，我想在 Dropdown 函数上执行 Alert，我没有渲染 returnCount 只是使用它来显示警报，< /p>

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

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

在使用 React 钩子时，您需要在 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]);

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

1 个答案: