編譯失敗：<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"); }