在一个地方调用函数会影响其他也调用该函数的地方

Question

我有一个简单的页面，它有两个部分：一个在页面加载后显示 50% 的时间的标签，以及一个模拟滚动六面骰子结果的“滚动”按钮。这两个部分都使用了使用 Math.Random 的

d6

函数。

这些应该是独立的部分。按滚动按钮不应影响是否显示“hello”，但事实就是如此。按滚动按钮通常会使“hello”出现并消失。为什么会发生这种情况，我该如何阻止它？

代码沙箱在这里：https://codesandbox.io/p/sandbox/summer-monad-457k9j?file=%2Fsrc%2FApp.tsx%3A5%2C1-35%2C2

export default function App() {
  const [dieRollResult, setDieRollResult] = useState<number>(0);

  const die = (size: number): number => {
    return Math.floor(Math.random() * size) + 1;
  };

  const d6 = () => die(6);

  const shouldLabelBeVisible = () => (d6() <= 3 ? "visible" : "hidden");

  return (
    <Stack>
      <Typography visibility={shouldLabelBeVisible}>hello</Typography>
      <Typography>{dieRollResult}</Typography>
      <Button
        onClick={() => {
          setDieRollResult(d6());
        }}
      >
        Roll
      </Button>
    </Stack>
  );
}

Answer 1

首先，MUI Typography 组件不直接支持visibility prop。我还想了解为什么你在 hello 部分使用 shouldLabelBeVisible ？如果数字小于或等于 3 ，您希望它可见吗？如果是这样，我尝试了 console.log 但它似乎不匹配，就像它是随机的任何数字都可以可见或隐藏。