reactjs - React JS 中的状态更新无法正常工作

Question

我的反应状态似乎落后了一步。在回答了类似问题之后，似乎解决方案是一个 useEffect 钩子。我已经尝试过但没有想出一种方法来实现 useEffect 来解决我的问题。当我控制台记录它时，我需要值来显示它的当前状态。请帮忙

const [productId,setProductId] = useState("")
const [quantity, setQuantity] = useState(1)
const [itemName,setItemName] = useState("")
const [values, setValues] = useState({})
                                   

<Input name={item.title} id={item.id} type="number"
onChange={(e)=>{setQuantity(e.target.value)
                setItemName(e.target.name)}} />
<Button color="info" size="sm" 
onClick={ ()=>{
setSelectedItems(prevItems=>{ 
return [...prevItems, {name:itemName,quantity:quantity}] })
setValues(prevState=>{ return {...prevState, items: selectedItems } })
}}> Add </Button>

<Button
  color="info"
  onClick={()=>console.log(values)}
  disabled={!isLoading}
>Click me
</Button> 

链接到重现问题的沙盒： https ://codesandbox.io/s/sharp-panini-8oc4g?file=/src/App.js

选择项目并单击底部的“单击我”后，值中的项目数组比 UI 上显示的所选项目落后一步。在下图中，我清楚地添加了 3 个项目，但单击“单击我”在项目数组中仅显示两个。

标签： reactjsreact-hooks