在材料ui标签中使用useEffect隐藏第三个标签

Posted 2023-02-07

• 在页面加载中，我需要隐藏前两个选项卡
• 我需要显示第三个带有内容的选项卡。
• 但是现在仅在单击第三个选项卡之后，我才看到内容。
• 所以我调试并决定使用useEffect。
• 但是newValue即将变得不确定。
• 您能告诉我如何解决它。
• 在下面提供我的代码段和沙箱。

https://codesandbox.io/s/material-demo-g08qt

export default function SimpleTabs() 
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  useEffect(newValue => 
    // const  user  = props;

    console.log("useEffect newValue--->", newValue);
  , []);

  const handleChange = (event, newValue) => 
    console.log("newValue--->", newValue);
    setValue(newValue);
  ;

答案

只需将您的初始状态设置为2，这是第三个选项卡的值。

export default function SimpleTabs() 
  const classes = useStyles();
  const [value, setValue] = React.useState(2);
....

另一答案

传递给useEffect的函数不带任何参数，如果需要在值更改时运行一种效果，然后将其作为useEffect的第二个参数添加到数组：

useEffect(() => 
  // const  user  = props;

  console.log("useEffect newValue--->", value);
, [value]);//run every time value changes