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

发布于03月28日

我有一个简单的页面，有两部分:一个标签，显示50%的时间后，页面加载，和一个'滚动'按钮，模拟滚动一个六面骰子的结果. 这两个部分都使用一个使用Math.Random的d6函数.

这些应该是独立的部分.按下Roll按钮不应该影响是否显示"hello"，但这就是发生的事情. 按下Roll按钮通常会使"Hello"出现和消失. 为什么会发生这种情况，我该如何阻止它？

代码Sandbox 这里: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>
  );
}

import "./styles.css"; import { Button, Stack, Typography } from "@mui/material"; import { useState, useMemo } from "react"; const die = (size: number): number => { return Math.floor(Math.random() * size) + 1; }; const d6 = () => die(6); export default function App() { const [dieRollResult, setDieRollResult] = useState<number>(0); const shouldLabelBeVisible = useMemo(() => { return d6() <= 3 ? "visible" : "hidden"; }, []); return ( <Stack> <Typography visibility={shouldLabelBeVisible}>hello</Typography> <Typography>{dieRollResult}</Typography> <Button onClick={() => { setDieRollResult(d6()); }} > Roll </Button> </Stack> ); }

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

推荐答案

Reactjs相关问答推荐

如何使用react-router-dom导航到网页中的其他路由？

Next.js-图像组件加载问题

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

React，React Router，Joy UI：如何在导航离开和返回后禁用snackbar重新出现？

react '；S使用状态不设置新状态

如何使用useState响应快速/顺序状态更新

安装使用环境的BIT组件的依赖项

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

onClick 事件处理程序未应用于样式组件

React useContext 的未定义返回值

如何管理可重用无线电输入的 React 状态？

React 组件列表中的第一个计时器正在获取值 NaN

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

MUI TextField Select 菜单的最大高度

如何在同一路由路径上重新渲染组件(链接，V6)reactjs

MUI - ButtonGroup fullWidth 条件屏幕大小不起作用？

如何向 surveyjs 调查添加多个结尾？

如何制作基于对象 struct 呈现数据的可重用组件？

如何在 Cypress E2E 的站点上测试react 组件？

在 Redux 中更新布尔状态时出错