如何在React中用Axios实现SUPERHERO API动态URL请求并解决报错

错误原因 #

• onClick回调未封装为函数：你当前的写法会在组件渲染阶段直接执行setHero逻辑，此时DOM可能还未挂载完成，document.getElementById("heroName")返回null，读取innerText就会触发该报错。
• 输入框取值属性错误：input元素的输入内容存储在value属性而非innerText中，即使拿到DOM元素取值也会得到错误结果。
• useEffect触发逻辑不合理：将hero作为依赖会导致页面初始化时（hero为空字符串）自动发起无意义的API请求，不符合搜索场景的交互逻辑。
• 不推荐直接操作原生DOM：在React中使用getElementById获取元素属于非规范写法，会增加状态不可控的风险。

修复代码 #

推荐改用React受控组件写法，把输入框内容直接绑定到state，点击搜索按钮时再发起请求，修复后代码如下：

import { useState } from 'react';
import axios from 'axios';

function App() {
  // 绑定输入框内容
  const [searchText, setSearchText] = useState("");
  // 存储返回的英雄数据，可根据业务需求扩展
  const [heroData, setHeroData] = useState(null);

  const handleSearch = async () => {
    const trimText = searchText.trim();
    // 空搜索词不发起请求
    if (!trimText) return;
    try {
      // 请将路径中的apikey替换为你自己的SUPERHERO API密钥
      const res = await axios.get(`https://cors-anywhere.herokuapp.com/https://superheroapi.com/api/apikey/search/${trimText}`);
      setHeroData(res.data);
      console.log(res.data);
    } catch (err) {
      alert("not found");
    }
  }

  return (
    <div className="App">
      <div className="input-container">
        <input 
          type="text" 
          placeholder="search hero"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
        {/* 把type改为button避免表单默认提交行为 */}
        <button type="button" onClick={handleSearch}>search</button>
      </div>
      {/* 可自行补充英雄数据的渲染逻辑 */}
    </div>
  )
}

export default App;

内容的提问来源于stack exchange，提问作者Amadeo de la Peña