每次输入更改都会调用 onClick 函数

Question

我正在尝试使用 onclick 函数 post 到本地服务器，但每次输入字段在这里更改时，它都会调用该函数，导致不必要的函数调用，我不明白为什么在这里被调用。

const testPost = () => {
  console.log("Clicked!")
  Axios.post('http://localhost:3001/', {testName: "albumName"})
    .then(() => {
      console.log('successful insert')
    });
};

function App() {

  const [albumName, setAlbumName] = useState('')

  return (
    <div className="App">
        <input type="text" name="albumName" onChange={(e) => {
          setAlbumName(e.target.value)
        }}/>
        <button onClick={testPost()}>Submit</button>
      </header>
    </div>
  );
}

Answer 1

去掉(),就变成了{testPost}.

如果你这样做 testPost() 你每次渲染组件时都会 calling/executing testPost。一旦 JS 解释器遇到该行，它就会运行该函数。

使用 onClick，您只想传递要在单击 时调用的函数的引用 。所以只需使用 testPost.

对于 React，每次组件内的状态发生变化时，它 re-renders 整个组件，所以这就是每次输入变化时都会调用您的函数的原因。

每次输入更改都会调用 onClick 函数

onClick function is called for every input change

javascript

node.js

reactjs

axios