我的代码中有错误反应 js 项目

Question

错误是，类型错误：无法读取未定义的属性（读取“结果”）请帮助我完成项目。 我使用了电影数据库中的 API 来获取电影的数据。 但是这样做时我得到了错误，您无法在代码编辑器中看到它们，我使用 Visual Studio 代码，但是当我保存时，它没有显示结果，这对我提出了挑战。 我要退出这个项目，因为我不能再进一步了。 我需要帮助。 是的，我可以理解我是这个反应的新手，但我已经练习了 3 个月。 我没有发布其他代码，但如果需要，我将不得不发布整个项目。 请一些帮助，我会appriciate。

Home.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'results')
at Home (Home.js:27)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)

主页.js

import React, { useState, useEffect } from "react"; //rafce
import reactDom from "react-dom";

//Config
import { POSTER_SIZE, BACKDROP_SIZE, IMAGE_BASE_URL } from "../config";
//components
import HeroImage from "./HeroImage";
//hook
import { useHomeFetch } from "../hooks/useHomeFetch";
//image
import NoImage from "../images/no_image.jpg";
  
import Grid from "./Grid";

import Thumb from "./Thumb";

import Spinner from "./Spinner";

import SearchBar from "./SearchBar";

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

  console.log(state);

  return (
    <>
      {state.results ? (
        <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 />
    </>
  );
}; 

export default Home;

使用HomeFetch.js

import { useState, useEffect, useRef } from "react";
import reactDom from "react-dom";
//API
import API from "../API";
//initial state
const initialState = {
  page: 0,
  results: [],
  total_pages: 0,
  total_results: 0,
};
export const useHomeFetch = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [state, setState] = useState();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  const fetchMovies = async (page, searchTerm = "") => {
    try {
      setError(false);
      setLoading(true);

      const movies = await API.fetchMovies(searchTerm, page);

      setState((prev) => ({
        ...movies,
        results:
          page > 1 && prev ? [...prev.results, ...movies.results] : [...movies.results],
      }));
    } catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  //initial ans search
  useEffect(() => {
    // setState(initialState);
    fetchMovies(1);
  }, []);

  return { state, loading, error, setSearchTerm };
}; 

Answer 1

第一次当你 setState prev 是未定义的，但你没有检查

尝试这样的事情：

results: page > 1 && prev ? [...prev.results, ...movies.results] : [...movies.results]

Answer 2

你错过了上一个之后的“电影”。 它应该是：

page > 1 && prev ? [...prev.results, ...movies.results] : [...movies.results],