反应计数器状态不更新

Question

我在更新 React 中的计数器状态时遇到问题。澄清一下——我使用了两种状态，一种是计数器，另一种是 id 计数器（基本上是相同的想法和结构）。在我的渲染 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

组件状态更新函数运行async，当你运行setItems，id值为0，为了避免这种情况，移动setItems to useEffect 阻止使用 id 作为依赖项：

useEffect(()=> {
   setItems(prevItems => [...prevItems, { id: id, name: props.name}])
}, [id])

const addItem = () => {
    if (!(items.some(item => item.name === props.name))) {
        setId(id + 1)
    }
}

Answer 3

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

反应计数器状态不更新

React counter state not updating

javascript

counter

reactjs

react-state