#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],