为什么应用程序在反应中获取输入变化？答案

【问题标题】：Why is app fetching on input change in react?为什么应用程序在反应中获取输入变化？
【发布时间】：2023-02-25 07:07:32
【问题描述】：

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

function App() {

  const [name, setName] = useState('');

  const fetchData = () => {
    Axios.get(`https://api.agify.io/?name=${name}`).then((res)=> {
      console.log(res.data)
    })
  }

  return (
    <div className="App">
      <input placeholder='Ex. John' onChange={(e)=> {setName(e.target.value)}}></input>
      <button onClick={fetchData()}>Predict your age</button>

      <h1> Predicted age: </h1>
    </div>
  );
}

export default App;

我目前正在学习 react.js，我不明白它是如何工作的。我希望如果我写一个输入，状态就会保存它，当我点击按钮时，它会获取我想要的数据（就像一个随机的 json 文件，带有年龄和来自 API 的名称）但是我的网站会获取一个空的 json（因为输入框中没有任何内容）呈现 App 功能，并继续获取输入更改。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

你按钮的onClick表达式是调用fetchData 并将其返回值设置为点击处理程序，而不是将 fetchData 本身设置为点击处理程序。

每次您的 App 组件呈现时，都会调用 fetchData，并且更新状态会触发重新呈现。

因此，每次调用setName 时，都会触发组件的重新渲染，从而再次调用 fetchData。

解决方法是将 fetchData 函数本身作为 onClick 处理程序传递，而不是调用 fetchData 的结果。删除()：

<button onClick={fetchData}>Predict your age</button>

【讨论】：