typescript MUI开关中检查的属性未更新

mnemlml8  于 2022-12-24  发布在  TypeScript
关注(0)|答案(2)|浏览(113)

switchPermission函数中的RankPermission. value从false变为true,但浏览器中的MUI开关没有更新。我不知道为什么它没有更新,我也没有尝试太多。我不知道如何修复它。

const [activeRank, setActiveRank] = useState<FactionRanks>();
export type FactionRanks = {
  id: number;
  name: string;
  rankPermissions: FactionRanksPermissions[];
};

export type FactionRanksPermissions = {
  label: string;
  value: boolean;
};
const ActionMenu = () => {
  const { activeRank } = useContext(FactionPanelContext);

  const switchPermission = (rankPermission: FactionRanksPermissions) => {
    rankPermission.value = !rankPermission.value;
    console.log(rankPermission);
  };

  return (
    <Wrapper>
      <Buttons>
        {activeRank?.rankPermissions.map(
          (rankPermission: FactionRanksPermissions, index: number) => (
            <Row key={index}>
              <OptionDetails>{rankPermission.label}</OptionDetails>
              <IOSSwitch
                checked={rankPermission.value}
                inputProps={{ 'aria-label': 'secondary checkbox' }}
                onClick={() => switchPermission(rankPermission)}
              />
            </Row>
          )
        )}
      </Buttons>
    </Wrapper>
  );
};
vfh0ocws

vfh0ocws1#

状态设置为错误的对象。

activeRank

您应该使用新对象设置状态

rankPermission
syqv5f0l

syqv5f0l2#

您正在此处更改rankPermission

rankPermission.value = !rankPermission.value;

您应该使用新对象rankPermission设置state,而该对象是在其中定义的。

相关问题