如何解决反应计数器状态未更新
我在 React 中更新计数器状态时遇到问题。为了澄清事情 - 我使用了两种状态,一种是计数器,另一种是 id-counter(基本相同的想法和结构)。在我的渲染 jsx 中,我得到了这个:
<button onClick={incCounter}></button>
<button onClick={decCounter}></button>
<button onClick={addItem}></button>
我包含 incCounter 和 decCounter 的原因是因为我对它们如何正常工作感到困惑,而 ID 计数器却没有。代码如下:
const [items,setItems] = useContext(ItemsContext)
const [counter,setCounter] = useState(0)
const [id,setId] = useState(0)
const incCounter = () => {
setCounter(counter + 1)
}
const decrementQuantity = () => {
setCounter(counter - 1)
}
这是有问题的部分,由于某种原因不起作用(id 的值始终为 0):
const addItem = () => {
if (!(items.some(item => item.name === props.name))) {
setId(id + 1)
setItems(prevItems => [...prevItems,{ id: id,name: props.name}])
}
}
注意:我尝试将 setId 移到 if 语句上方,但没有结果。
解决方法
如果 id
只是一个计数器或索引,你可以使用 useRef
:
const [items,setItems] = useContext(ItemsContext)
const id = useRef(0)
并增加它并在 setItems
中使用它:
const addItem = () => {
if (!(items.some(item => item.name === props.name))) {
setItems(prevItems => [...prevItems,{ id: ++id.current,name: props.name}])
}
}
,
组件的状态更新函数run async
,当你运行setItems
时,id值为0
,为了避免这种情况,使用{移动setItems到useEffect
块{1}} 作为依赖项:
id
,
我找到了问题的答案。我多次调用这个组件,我试图从很多地方修改一个值,但由于 id 在组件中,这是不可能的。对于未提供有关多次通话的信息,我深表歉意。解决方案是简单地使用 uuidv4 并调用它并在我创建组件本身时将 id 作为道具传递。这样,一切都按预期进行。谢谢大家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。