在材质 UI 选项卡中使用效果来隐藏第三个选项卡

Question

• 在页面加载时，我需要隐藏前两个选项卡
• 我需要显示包含内容的第三个选项卡。
• 但是现在单击第三个选项卡后，我只能看到内容。
• 所以我调试并决定使用 useEffect。
• 但有新的价值正在未定义。
• 你能告诉我如何解决它吗？
• 在下面提供我的代码片段和沙盒。

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);
};

Answer 1

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

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

Answer 2

你传递给useEffect的函数不接受任何参数，如果你需要一个效果在值变化时运行，那么把它作为第二个参数添加到数组中，以使用Effect：

useEffect(() => {
// const { user } = props;
console.log("useEffect newValue--->", value);
}, [value]);//run every time value changes