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;

const SalesChartCard=（数据）=>{
常量[toggleButton，toggleButtons]=useState({
"印象":对,，
“purchasestart”：true，
“purchasecancel”：true，
“purchasecomplete”：true
});
常量按钮单击=（维度）=>{
切换按钮({
维度：！toggleButton.dimension
});
};
返回(
按钮单击（'impressions'）}
color=“primary”className=“mb-2”>
印象
按钮单击（'purchasestart'）}
color=“secondary”className=“mb-2”>
采购开始
按钮单击（'purchasecancel'）}
color=“danger”className=“mb-2”>
取消购买
按钮单击（'purchasecomplete'）}
color=“success”className=“mb-2”>
购买完成
);
}; 
导出默认销售图表卡；

您的状态是一个对象。更新对象时，还需要保留以前的值。因此，与使用尺寸键创建新对象不同，您必须使用对象排列来保持以前的状态

此外，由于键位于变量中，所以需要在[]内使用键

你可以这样做

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

    toggleButtons({
        ...toggleButton,
        [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;

const SalesChartCard=（数据）=>{
常量[toggleButton，toggleButtons]=useState({
"印象":对,，
“purchasestart”：true，
“purchasecancel”：true，
“purchasecomplete”：true
});
常量按钮单击=（维度）=>{
切换按钮({
…切换按钮，
[维度]：！toggleButton[维度]
});
};
返回(
按钮单击（'impressions'）}
color=“primary”className=“mb-2”>
印象
按钮单击（'purchasestart'）}
color=“secondary”className=“mb-2”>
采购开始
按钮单击（'purchasecancel'）}
color=“danger”className=“mb-2”>
取消购买
按钮单击（'purchasecomplete'）}
color=“success”className=“mb-2”>
购买完成
);
}; 
导出默认销售图表卡；
使用状态
react钩子不会浅合并状态更新，您需要自己管理

对于给定的单击处理程序：
onClick={e=>buttonClick（'impressions'）}

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

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