我的代碼中有錯誤反應 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],