Javascript 在函数组件中引用不带'this'的局部变量

我想引用函数组件中的变量， 我想通常我使用

this

来引用局部变量

但是，在函数组件中，我不能使用

this

也许，我还是被功能组件搞糊涂了

export default function TrackPage(props) {
    const classes = useStyles();

    useEffect(() => {
       var playlist = 1;
    }
    function handleToolBarClick(){
        this.playlist // this is empty.
    }
}

---

Javascript作用域严格基于函数。一旦变量不在您的范围内，您就不可能访问它。因此，您需要将可变部分纳入您的范围：

export default function TrackPage(props) {
    const classes = useStyles();

    var playlist; // Make this variable available to both 
                  // useEffect and handleToolBarClick

    useEffect(() => {
       playlist = 1;
    },[]);

    function handleToolBarClick(){
        playlist // this works
    }
}

---

您需要将值存储在状态为

useState

（如果更改它会导致重新渲染）或引用为

useRef

（如果您想更改值而不触发重新渲染）。如果您想

this

，则创建一个类组件，函数组件是无状态的，或者使用上面提到的挂钩，它本质上使状态在整个渲染过程中保持不变，并可通过

useState

等访问。您的useffect函数不正确。这种用法需要纠正。请你改正一下好吗？非常感谢。组件函数可以在这里声明变量。