React中onSubmit函数未执行：维基百科API搜索功能异常

核心问题及解决步骤： #

• 阻止表单默认提交行为：表单默认提交会刷新页面，导致searchQuery执行后页面直接重置，看起来像没触发。必须在searchQuery中接收事件参数，调用event.preventDefault()阻断默认行为。
• 初始化状态类型错误：搜索值是文本类型，初始值设为0会导致类型不匹配，改成空字符串""才合理。
• 移除不必要的主动调用：组件渲染时直接调用searchQuery()会导致页面一加载就执行搜索，完全不符合用户触发的逻辑，删掉这行代码。
• 避免覆盖整个页面DOM：document.body.textContent = ...会把包括搜索表单在内的整个页面内容替换掉，之后根本无法再进行搜索操作。改成用组件状态存储结果，通过React渲染展示。

修复后的完整代码： #

const SearchForm = () => {
  // 初始值改为空字符串，匹配搜索文本类型
  const [search, setSearch] = useState("");
  // 新增状态存储搜索结果
  const [searchResults, setSearchResults] = useState(null);

  const searchField = (event) => {
    setSearch(event.target.value);
  };

  // 接收event参数，阻止默认提交行为
  const searchQuery = async (event) => {
    event.preventDefault();
    
    const params = {
      action: "query",
      format: "json",
      list: "search",
      srsearch: search,
    };

    const url = new URL(
      "https://corsanywhere.herokuapp.com/https://en.wikipedia.org/w/api.php/"
    );

    for (let param in params) {
      url.searchParams.append(param, params[param]);
    }

    try {
      const searchData = await fetch(url);
      const data = await searchData.json();
      // 把结果存到状态里，通过React渲染展示
      setSearchResults(data);
      console.log(data);
    } catch (error) {
      console.error("搜索出错：", error);
    }
  };

  return (
    <div>
      <form onSubmit={searchQuery}>
        <input
          type='search'
          placeholder='search wikipedia'
          onChange={searchField}
          value={search} {/* 受控组件，绑定value到state，确保输入与状态同步 */}
        ></input>
        <input type='submit' value='search'></input>
      </form>
      {/* 条件渲染搜索结果 */}
      {searchResults && (
        <pre>{JSON.stringify(searchResults, null, 4)}</pre>
      )}
    </div>
  );
};

额外优化说明： #

• 将输入框改为受控组件，绑定value到search状态，确保输入值与组件状态完全同步。
• 增加try/catch捕获请求错误，避免网络异常导致页面崩溃。
• 使用组件内部状态管理搜索结果，遵循React的DOM渲染逻辑，不再直接操作全局document。

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