Question

我正在尝试使用 React 钩子制作一个类似按钮的计数器。我已经以这种方式定义了箭头函数，但是我得到了未定义的 IncreaseLikeHandler。

import {useState} from "react";
import './App.css';


function App() {

  IncreaseLikeHandler = () =>{
    setLikeCounter(likeCounter+1);
    };
    
  const [likeCounter, setLikeCounter] = useState(0);
  const [dislikeCounter, setDislikeCounter] = useState(0);

  return (
    <div className="App">
      <p>test</p>
      <button onClick={IncreaseLikeHandler}>like</button>
      <button>dislike</button>
      <div>{likeCounter}</div>
    </div>
  );
}



export default App;

Answer 1

你必须先声明它然后你才能使用它

不声明eslint会投诉

<块引用>

'IncreaseLikeHandler' is not defined. (no-undef)eslint

const IncreaseLikeHandler = () => {
  setLikeCounter(likeCounter + 1);
};

Answer 2

在 fanction 组件中，您必须使用（const、let 和 var）来定义函数。

功能组件内的箭头函数是未定义的反应钩子

2 个答案: