у меня есть ошибка в моем проекте code react js

#javascript #node.js #reactjs #react-native

Вопрос:

Ошибка в том, ошибка типа: Не удается прочитать свойства неопределенных (чтение «результатов») пожалуйста, помогите мне, я хочу закончить проект. Я использовал API из базы данных фильмов для того, чтобы получать данные о фильмах. но при этом я получаю ошибки, вы не можете видеть их в редакторе кода, я использую код Visual studio, но когда я сохраняю, он не показывает результатов, и это бросило мне вызов. Я собираюсь выйти из проекта, потому что больше не могу идти дальше. Мне нужна помощь. Да, я могу понять, что я новичок в этой реакции, но я практиковал ее уже 3 месяца. Я не публиковал другие коды, но если понадобится, мне придется опубликовать весь проект целиком. Пожалуйста, помогите, и я сообщу об этом.

 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 = () =gt; {  const { state, loading, error, setSearchTerm } = useHomeFetch();   console.log(state);   return (  lt;gt;  {state.results ? (  lt;HeroImage  image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${state.results[0].backdrop_path}`}  title={state.results[0].original_title}  text={state.results[0].overview}  /gt;  ) : null}  lt;SearchBar setSearchTerm={setSearchTerm} /gt;  lt;Grid header="Popular Movies"gt;  {state.results.map((movie) =gt; (  lt;Thumb  key={movie.id}  clickable  image={  movie.poster_path  ? IMAGE_BASE_URL   POSTER_SIZE   movie.poster_path  : NoImage  }  movieId={movie.id}  /gt;  ))}  lt;/Gridgt;  lt;Spinner /gt;  lt;/gt;  ); };   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 = () =gt; {  const [searchTerm, setSearchTerm] = useState("");  const [state, setState] = useState();  const [loading, setLoading] = useState(false);  const [error, setError] = useState(false);   const fetchMovies = async (page, searchTerm = "") =gt; {  try {  setError(false);  setLoading(true);   const movies = await API.fetchMovies(searchTerm, page);   setState((prev) =gt; ({  ...movies,  results:  page gt; 1 amp;amp; prev ? [...prev.results, ...movies.results] : [...movies.results],  }));  } catch (error) {  setError(true);  }  setLoading(false);  };   //initial ans search  useEffect(() =gt; {  // setState(initialState);  fetchMovies(1);  }, []);   return { state, loading, error, setSearchTerm }; };   

Комментарии:

1. если state.results это массив, то ваша проверка должна быть state.results.length gt; 0 как состояние.результаты всегда будут верными. то же самое относится и к результатам в состоянии в вашем useHomeFetch компоненте

Ответ №1:

В первый раз, когда вы устанавливаете состояние, предыдущее значение не определено, но у вас нет проверки на это

Попробуйте что-нибудь в этом роде:

 results: page gt; 1 amp;amp; prev ? [...prev.results, ...movies.results] : [...movies.results]  

Комментарии:

1. все еще не работает, в Home.js , вверх я вижу, что в нем 5 ошибок, и useHomeFetch.js имеет 2 ошибки. так что теперь я не знаю.

2. еще одна ошибка-ошибка типа: не удается прочитать свойства неопределенного (чтение «backdrop_path») в home.js

3. А также не удается загрузить некоторые svg-изображения.

Ответ №2:

вы пропускаете «фильмы» после предыдущего. это должно быть:

 page gt; 1 amp;amp; prev ? [...prev.movies.results, ...movies.results] : [...movies.results],