Question

我在 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 语句上方，但没有结果。

Answer 1

如果 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}])
    }
}

Answer 2

组件的状态更新函数run async，当你运行setItems时，id值为0，为了避免这种情况，使用{移动setItems到useEffect块{1}} 作为依赖项：

id

Answer 3

我找到了问题的答案。我多次调用这个组件，我试图从很多地方修改一个值，但由于 id 在组件中，这是不可能的。对于未提供有关多次通话的信息，我深表歉意。解决方案是简单地使用 uuidv4 并调用它并在我创建组件本身时将 id 作为道具传递。这样，一切都按预期进行。谢谢大家！

反应计数器状态未更新

3 个答案: