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

Question

The error is, TypeError: Cannot read properties of undefined (reading 'results') please help me i want to finish the project. I have used API from movie database inorder to fetch data of the movies. but in so doing i get the errors, you cannot see them in the code editor, i use visual studio code but when i save, it doesn't show the results and it has challenged me. I am going to quit the project because i can no longer go further more. I need some help. Yes i can understand that i am new in this react but i have practiced it for now 3 months. I have not posted other codes but if in need i will have to post the whole project. Some help please and i will 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)

home.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;

useHomeFetch.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

The first time when you setState the prev is undefined, but you don't have check for that

Try something like that:

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

Answer 2

you are missing the 'movies' after prev. it should be:

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