React JS项目调用电影数据库API报错：Cannot read properties of undefined (reading 'results')

• 自定义Hook useHomeFetch 中的state未设置初始值：你已经定义了initialState常量，但在调用useState时没有传入作为初始值，导致组件首次渲染时state为undefined，此时在Home组件中直接访问state.results就会触发"读取undefined的results属性"的报错。
• Home组件未做防御性判断：没有结合loading状态控制渲染逻辑，API请求未完成时就尝试访问接口返回的数据。
• 加载状态逻辑不合理：Spinner组件始终展示，没有和loading状态绑定。

1. 修改useHomeFetch.js的state初始化 #

找到useState()的调用，传入你提前定义的initialState作为初始值：

// 原来的写法
const [state, setState] = useState();
// 修改为
const [state, setState] = useState(initialState);

如果后续要做搜索清空逻辑，可以把useEffect里注释的setState(initialState)打开（搜索关键词变化时重置状态）。

2. 修改Home.js的渲染逻辑 #

增加加载状态判断、state存在性判断，同时给数组遍历加可选链防御：

const Home = () => {
  const { state, loading, error, setSearchTerm } = useHomeFetch();

  console.log(state);

  // 异常状态处理
  if (error) return <div>加载电影数据失败，请刷新重试</div>;

  return (
    <>
      {!loading && state.results?.length ? (
        <HeroImage
          image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${state.results[0].backdrop_path}`}
          title={state.results[0].original_title}
          text={state.results[0].overview}
        />
      ) : null}
      <SearchBar setSearchTerm={setSearchTerm} />
      <Grid header="Popular Movies">
        {state.results?.map((movie) => (
          <Thumb
            key={movie.id}
            clickable
            image={
              movie.poster_path
                ? IMAGE_BASE_URL + POSTER_SIZE + movie.poster_path
                : NoImage
            }
            movieId={movie.id}
          />
        ))}
      </Grid>
      {/* 只有加载中才显示Spinner */}
      {loading && <Spinner />}
    </>
  );
}; 

VS Code没有代码提示报错是因为你没有接入TypeScript做类型校验，运行时才会暴露空值访问的问题，后续开发可以给状态加类型定义提前规避这类问题。

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