时间戳

首页 > 解决方案 > 更新 useState onclick 不更新

reactjs - 更新 useState onclick 不更新

问题描述

我正在尝试更新 useState 对象，我的目标是切换按钮并在 useState 中保持哪个按钮打开，哪个按钮关闭。

  const SalesChartCard = (data) => {
const [toggleButton, toggleButtons] = useState({
    'impressions': true,
    'purchasestart': true,
    'purchasecancel': true,
    'purchasecomplete': true
});
const buttonClick = (dimension) => {

    toggleButtons({
        dimension: !toggleButton.dimension
    });
};
return (
    <>
        <Button
            outline={toggleButton.impressions}
            onClick={e => buttonClick('impressions')}
            color="primary" className="mb-2">
            Impressions
        </Button>
        <Button
           outline={toggleButton.purchasestart}
            onClick={e => buttonClick('purchasestart')}
            color="secondary" className="mb-2">
            Purchase Start
        </Button>
        <Button
              outline={toggleButton.purchasecancel}
            onClick={e => buttonClick('purchasecancel')}
            color="danger" className="mb-2">
            Purchase Cancel
        </Button>
        <Button
           outline={toggleButton.purchasecomplete}
            onClick={e => buttonClick('purchasecomplete')}
            color="success" className="mb-2">
            Purchase Complete
        </Button>
    </>
    );
}; 
export default SalesChartCard;

标签： reactjsjsx

解决方案

useStatereact 钩子不会浅合并状态更新，您需要自己管理它。

对于给定的点击处理程序：onClick={e => buttonClick('impressions')}

buttonClick回调处理程序应合并现有状态并使用动态（计算的属性名称）键来更新正确的属性。使用功能状态更新从前一个状态正确计算下一个状态。这可确保所有先前的状态更新在更新时正确合并。

const buttonClick = (dimension) => {
  toggleButtons(prevState => ({
    ...prevState,
    [dimension]: !prevState[dimension],
  }));
};

推荐阅读