Question

我想在状态更新后运行地图功能。但目前发生的情况是 map 函数甚至在状态更新之前渲染元素，因为它是异步的。在基于函数的组件中更新状态后，有没有办法回调？提前致谢。

 const[arrDeliveryDetails,setArrDeliveryDetails]=useState([
         {id:0,TradeCode:'AZ-120', ExpectedQuantity:0, DeliveredQuantity:0, ItemDeliveryStatus:1},
         {id:1,TradeCode:'AZ-121', ExpectedQuantity:1, DeliveredQuantity:1, ItemDeliveryStatus:1},
         {id:2,TradeCode:'AZ-122', ExpectedQuantity:2, DeliveredQuantity:2, ItemDeliveryStatus:1},
         {id:3,TradeCode:'AZ-123', ExpectedQuantity:3, DeliveredQuantity:3, ItemDeliveryStatus:1},
     ])}

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

         arrDeliveryDetails.map((items)=>{ 
            console.log(items)
            items.ItemDeliveryStatus=="1" ?
                setPendingCount(prev=>prev+1)                              
            :items.ItemDeliveryStatus=="2" ?
                setDeliveredCount(prev=>prev+1)
            : items.ItemDeliveryStatus=="3" ?               
                setCompletedCount(prev=>prev+1)
            :   setReturnedCount(prev=>prev+1)
        })

Answer 1

不，你不能，因为 setArrDeliveryDetails 是异步的，你不知道 arrDeliveryDetails 什么时候会更新（这就是 React 的工作方式）。

只需使用局部变量update：

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

         update.map((items)=>{ 
            console.log(items)
            items.ItemDeliveryStatus=="1" ?
                setPendingCount(prev=>prev+1)                              
            :items.ItemDeliveryStatus=="2" ?
                setDeliveredCount(prev=>prev+1)
            : items.ItemDeliveryStatus=="3" ?               
                setCompletedCount(prev=>prev+1)
            :   setReturnedCount(prev=>prev+1)
        })

Answer 2

在 React 中设置状态是一个异步过程。

您无法在 setState 之后直接访问更新的数据。

因此，在这种情况下，您可以使用 useEffect 并将 state 变量放在依赖项数组中。

useEffect(() => {
    arrDeliveryDetails.map((items)=>{ 
       console.log(items)
       items.ItemDeliveryStatus=="1" ?
          setPendingCount(prev=>prev+1)                              
       :items.ItemDeliveryStatus=="2" ?
          setDeliveredCount(prev=>prev+1)
       : items.ItemDeliveryStatus=="3" ?               
          setCompletedCount(prev=>prev+1)
       :   setReturnedCount(prev=>prev+1)
  })
}, [arrDeliveryDetails]);

Answer 3

状态更新后不应立即使用状态，因为该值必须在渲染周期后影响状态变量。

我们可以使用将新值应用于状态的值，而不是使用状态。

例如

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

         update.map((items)=>{ 
            console.log(items)
            items.ItemDeliveryStatus=="1" ?
                setPendingCount(prev=>prev+1)                              
            :items.ItemDeliveryStatus=="2" ?
                setDeliveredCount(prev=>prev+1)
            : items.ItemDeliveryStatus=="3" ?               
                setCompletedCount(prev=>prev+1)
            :   setReturnedCount(prev=>prev+1)
        })

状态不会立即更新功能组件

3 个答案: