React购物车按钮切换异常：需两次点击还原状态的问题求助

问题根源 #

你定义的var addedToCart = false是普通局部变量，每次组件重新渲染（比如调用setText/setBtnText更新状态后），这个变量都会被重新初始化回false。首次点击后你手动修改了它的值，但组件刷新时又回到初始状态，导致第二次点击的判断逻辑依然基于false，出现了需要两次点击才能切换的异常。

修复方案 #

把addedToCart改成React的useState状态变量，React会在组件重新渲染时自动保留状态值，不会被重置：

function ProductItem(props) {
   // 将普通变量替换为useState状态，持久化保存状态值
   const [addedToCart, setAddedToCart] = useState(false)
   const valuesCart = {
       val1 : "Add to cart",
       val2 : "Added to cart"
   }
   const [changedText , setText] = useState(props.type)
   const [changedBtnText , setBtnText] = useState(valuesCart.val1)
   
   const clickHandler = () => {
       if(!addedToCart){
           setText(valuesCart.val2)
           setBtnText(valuesCart.val2)
       }
       else{
           setText(props.type)
           setBtnText(valuesCart.val1)
       }             
       // 通过setAddedToCart更新状态，而非直接修改变量
       setAddedToCart(!addedToCart)
   }
}

额外优化：减少冗余状态 #

其实不需要维护changedText和changedBtnText两个独立状态，可以直接通过addedToCart的状态动态计算文本，避免多状态同步的潜在问题：

function ProductItem(props) {
   const [addedToCart, setAddedToCart] = useState(false)
   const valuesCart = {
       val1 : "Add to cart",
       val2 : "Added to cart"
   }
   
   // 基于addedToCart状态动态生成文本，无需额外状态变量
   const currentText = addedToCart ? valuesCart.val2 : props.type
   const currentBtnText = addedToCart ? valuesCart.val2 : valuesCart.val1
   
   const clickHandler = () => {
       setAddedToCart(!addedToCart)
   }
}

内容的提问来源于stack exchange，提问作者Mayur Athavale