编译失败：<function name> 未定义 no-undef</function>

Question

我在 reactJS 中有一个简单的功能组件，其中定义了箭头 function。 由于某种原因，它通过 function 退出抛出“未定义”错误。 它在我的其他存储库中工作，不确定它为什么开始抛出此错误。

我的代码：

模板.js

// Dependencies
import React, { useState } from 'react';


function Login(props) { 


    handleChange = () => {
        console.log('Hello');
    }


    return (
        <div>
            <p> Hello </p>
        </div>
    );
};


export default Login;

错误：

./src/screens/Template.js 第 8 行：'handleChange' 未定义 no-undef

搜索关键字以了解有关每个错误的更多信息。 此错误发生在构建期间，无法消除。

Answer 1

您必须在箭头函数的开头写上“const”。 因为它不在 class 组件中。

const handleChange = () => { console.log('Hello'); }

或者你可以只用；

function handleChange() { console.log('Hello'); }

Answer 2

handleChange是您定义的变量，因此请尝试在handleChange之前添加const或let以查看错误是否消除。

// Dependencies
import React, { useState } from 'react';


function Login(props) { 


    const handleChange = () => {
        console.log('Hello');
    }


    return (
        <div>
            <p> Hello </p>
        </div>
    );
};


export default Login;

Answer 3

使用const定义一个 function。 但我建议你这样写：

// Dependencies
import React, { useState } from 'react';

// Outside of your component, for performance 
const handleChange = () => {
    console.log('Hello');
}

function Login(props) { 
  return (
    <div>
        <p> Hello </p>
    </div>
  );
};


export default Login;

Answer 4

错误的原因是变量handleChange没有被声明。 在 Javascript 中，您可以通过以下方式之一声明它：

• var handleChange = () => {...}
• const handleChange = () => {...}
• 让 handleChange = () => {...}
• function handleChange() {...}

但是您不能简单地开始使用handleChange而不将其声明为变量。 语言解析器不知道它是什么并给出您看到的错误。

如果它在类似的代码中工作，那么该变量必须在程序的早期声明，但我需要查看其他实现才能确定。 也许是这样的：

var handleChange;

/* some other code here */
handleChange = () => { console.log("I work because I was declared earlier"); }