React中setUserdata未定义报错，但接口数据已返回，求解决

你的问题核心是变量名大小写拼写错误：
JavaScript是大小写敏感的语言，你通过useState定义状态更新函数时用的是setUserData（最后一个字母D为大写），但在axios请求的回调里误写成了setUserdata（d小写），导致引擎识别不到这个函数，抛出了ReferenceError。

修正方法 #

将回调中的setUserdata(res.data);修改为setUserData(res.data);即可解决该错误。

修正后的完整代码 #

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

function App() {

  const [userName, setUserName] = useState("");
  const [userData, setUserData] = useState(null);

  // 简化箭头函数写法，移除多余括号
  const fetchUserData = () => {
    // 避免空值请求
    if (!userName.trim()) return;
    
    console.log(userName)
    Axios.get(`https://api.agify.io/?name=${userName}`)
      .then((res)=>{
        console.log(res.data);
        setUserData(res.data);
      })
      // 添加错误捕获，处理请求失败场景
      .catch(err => {
        console.error('用户数据请求失败:', err);
      });
  }; 

  const handleNameChange = (event) =>{
    setUserName(event.target.value)
    console.log(event.target.value);
  }
  
  return (
    <div className="App">
      <input 
        placeholder="eg Richard"
        onChange={handleNameChange}
      />
      <button onClick={fetchUserData}>Predict Age</button>
      <p>{userName}</p>
      <h1>Name {userData?.name}</h1>
      <h1>Age {userData?.age}</h1>
      <h1>Count {userData?.count}</h1>
    </div>
  );
}

export default App;

额外优化建议 #

1. 添加错误捕获：给axios请求加上.catch()处理，避免请求失败时出现未处理的Promise错误；
2. 空值校验：在fetchUserData开头判断用户名是否为空，防止发送无效请求；
3. 简化函数写法：移除fetchUserData定义时多余的括号，箭头函数直接写成() => {}即可。

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