javascript - const 关键字和方法声明的问题

Question

我正在尝试新的 React Hooks API，我想知道为什么我的函数组件中的这个方法声明不起作用:

const Foo = (props) => {

    const [..., ...] = useState(...);
    ...
    onChange = (e) => { ... }

我在下面遇到了这个错误

'onChange' is not defined  no-undef

但是当我添加 const 关键字时它起作用了。

const onChange = (e) => { ... }

Answer 1

语法

const Foo = (props) => {/* */} 

声明一个普通的 javascript 函数并将其分配给变量 Foo。这不是要与类混淆。您不能像使用类属性语法对类声明“属性”一样。在类里面，您可以例如这样做:

class MyComp extends Component {
    onChange = e => {/* ... */}  // this declares `onChange` as a property

    render() {
        // you can use this.onChange here

        return (
            <input onChange={this.onChange} ... />
        )
    }
}

但是对于功能组件，这是无效的:

const MyComp = () => {
    // this is the body of the function

    onChange = e => {/* ... */};   // MyComp is not a class so you can't just declare proteries on it.
}

但是这是正确的语法:

const MyComp = () => {
    const onChange = e => {/* ... */}; 
}

但它可能并不像您认为的那样。它只是在 MyComp 函数内部创建了一个局部变量 onChange。因此错误 onChange is not defined。您将一个函数分配给变量 onChange，但您在使用它之前没有声明。它首先需要使用关键字const、let 或var 来声明。

即使您没有声明变量，代码可能仍然有效，因为解释器会默默地将其视为全局变量声明，这可能不是您想要的。