反应计数器状态不更新答案

【问题标题】：React counter state not updating反应计数器状态不更新
【发布时间】：2021-01-31 13:47:45
【问题描述】：

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

【问题讨论】：

我觉得应该是setId(prevState => prevState+1)（你需要访问并增加之前的状态值，而不是直接访问为id）
@OzgurSar 我也试过了，没有效果。 ://
我不明白有多少柜台。您还应该修复从setCounter(counter + 1) 到setCounter(prev => prev + 1) 的增加和减少功能
问题是状态没有同步更新。当您调用 setId 时，并不能保证 id 会很快更新到您的项目将使用新值。
您可以在重新渲染后使用useEffect 运行副作用，但由于您有很多计数器，这并不是一个真正的好方法

标签： javascript reactjs counter react-state

【解决方案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}])
    }
}

【讨论】：

我尝试实现它，仍然每次都得到 {current:0}。
那么，我敢肯定，您的代码中还有其他隐藏的问题（或用例），我们在问题或 cmets 中看不到。要解决这个问题，您应该考虑制作一个代码沙箱。
在我看来这是没有必要的，因为这是整个组件，当然我删除了大部分不需要的 jsx（例如：类名，与问题无关的标签），仅此而已关于它。

【解决方案2】：

组件的状态更新函数运行async，当你运行setItems时，id值为0，为避免这种情况，将setItems移动到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)
    }
}

【讨论】：

这会干扰我出于某种原因显示项目的组件，并且 id 仍未更新。

【解决方案3】：

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

【讨论】：