React为何在输入框变化时发起请求？按钮点击逻辑错误排查

核心问题 #

你遇到的问题出在按钮的onClick绑定逻辑上：

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

这里你直接执行了fetchData()，而非将函数本身传递给onClick属性。React渲染组件时会执行JSX中的所有表达式，所以页面加载时就会触发一次API请求；当输入框内容变化导致name状态更新、组件重新渲染时，又会再次执行fetchData()，进而出现持续发起请求的情况。

修复后的代码 #

将onClick的赋值改为传递函数引用（去掉括号），同时可以增加状态保存接口返回的年龄、空输入拦截等优化：

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

function App() {

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

  const fetchData = () => {
    if (!name.trim()) return; // 空输入时不发起无效请求
    Axios.get(`https://api.agify.io/?name=${name}`).then((res)=> {
      console.log(res.data);
      setPredictedAge(res.data.age);
    })
  }

  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: {predictedAge ?? 'N/A'}</h1>
    </div>
  );
}

export default App;

优化说明 #

• 新增predictedAge状态，用于存储接口返回的年龄数据，方便在页面上展示结果
• 添加空输入判断，避免输入为空时发起无意义的API请求

内容的提问来源于stack exchange，提问作者beni