React页面重载后state短暂生效随即报heroes未定义错误如何解决

问题根源 #

• 代码未导入useState、useEffect两个React内置钩子，直接调用会触发运行时错误。
• useEffect中调用onTermSubmit时未传入参数，导致函数接收的hero参数为undefined，最终请求路径变为/search/undefined，接口返回的response.data.results大概率为undefined，直接调用setHeroes将原本初始为空数组的heroes覆盖为undefined。页面刚加载的1秒请求还未返回，heroes还是初始空数组，因此能正常读取length，请求返回后heroes变为undefined，读取length就会抛出未定义错误。
• heroes && heroes.length生效的原因是JavaScript逻辑与的短路规则：如果heroes为undefined、null等假值，会直接返回假值，不会执行后续的heroes.length读取逻辑，自然不会抛出属性读取错误。

修复方案 #

核心修改点 #

1. 补上React钩子的导入语句。
2. 给setHeroes赋值时加兜底逻辑，保证heroes永远是数组类型。
3. 调用onTermSubmit时确保传入合法的搜索关键词，不需要初始请求的话直接删除对应的useEffect即可。

修复后完整代码 #

import { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import superApi from "./api/superApi";

function Home() {
  const [heroes, setHeroes] = useState([]);

  // 不需要初始加载就触发搜索的话，直接删除这个useEffect即可
  useEffect(() => {
    // 传入默认搜索关键词，示例为空字符串，可按需求调整
    onTermSubmit('');
  }, []);

  const onTermSubmit = async (hero) => {
    const response = await superApi.get(`/search/${hero || ''}`);
    // 兜底保证即便接口返回异常，heroes也永远是数组
    setHeroes(response.data.results || []);
  };

  return (
    <div>
      <SearchBar onFormSubmit={onTermSubmit} />
      <div>There are {heroes.length} heroes with that name</div>
      {/* 英雄列表遍历示例，保证heroes是数组后可直接遍历，不会报错 */}
      {heroes.map(heroItem => (
        <div key={heroItem.id}>{heroItem.name}</div>
      ))}
    </div>
  );
}

export default Home;

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