Question

职业、民俗。我最后总结得太多。

让我们走下去:

如下文所示,目前的应用只显示搜索页。该网页在另一个称为“ApiProvider”的网页上作了总结,因为通过这个网页,我正在使用APIC背景,我将很快谈谈这一背景。

import React from "react";
import Search from "./src/pages/Search";
import { CallApiProvider } from "./src/components/CallApiProvider";

export default function App() {
  return (
    <CallApiProvider>
      <Search />
    </CallApiProvider>
  );
}

The idea of the Search page is that when the app is opened, it should display a search field (the Busca component), a movie preview (the Preview component), and a horizontal list with the top 10 latest movies (the MovieCarousel component). The code for the Search page is right below.

import React, { useContext } from "react";
import { ScrollView, FlatList, Text, ActivityIndicator } from "react-native";
import Busca from "../components/Busca";
import { EnviromentButton } from "../components/EnviromentButton";
import Preview from "../components/Preview";
import MovieCarousel from "../components/MovieCarousel";
import { ApiContext } from "../components/CallApiProvider";
import styles from "../styles/Search_styles";

function Search() {
  const { details } = useContext(ApiContext);
  if (details !== undefined) {
    console.log(details.adult);
    return (
      <ScrollView style={styles.container}>
        <Busca dica={"Type title, categories, years, etc"} />
        <FlatList
          data={details} //Precisa ser substituído pelo array de gêneros
          renderItem={({ item }) => <EnviromentButton title={item.id} active />}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.genreList}
        />
        <Text style={styles.label}>Today</Text>
        <Preview />
        <Text style={styles.label2}> Recommend for you</Text>
        <MovieCarousel data={details} />
      </ScrollView>
    );
  } else {
    return (
      <ScrollView style={styles.container}>
        <ActivityIndicator style="large" />
      </ScrollView>
    );
  }
}

export default Search;

为了装上电影信息,我正在通过Calta ApiProvider网页发出APICA,并使用前面提到的APICA内容分发APIC的回复。 The Code for the CallApiProvider page is right below.

import React, { useState, useEffect, createContext } from "react";
import api from "../services/api";

export const ApiContext = createContext();

export const CallApiProvider = ({ children }) => {
  const [details, setDetails] = useState(null);
  useEffect(() => {

    async function fetchDetails() {
      try {
        const { data } = await api.get("/trending/all/week?language=pt-BR");
        const limitedData = data.results.slice(0, 10);
        setDetails(limitedData);
      } catch (error) {
        console.error("Error fetching", error);
      }
    }

    fetchDetails();
  }, []);
  
  return (
    <ApiContext.Provider value={{ details }}>
      {children}
    </ApiContext.Provider>
  );
};

因此,我的目标是,每当搜索页装满时,就检查细节变数是否已经收到APIC信息。如果它没有收到信息,就会没有定义,在这种情况下,我想显示装货屏幕。

The problem that is happening is that instead of the IF block rendering the loading screen when details is undefined, it is proceeding as if details has the API information, causing all the code dependent on that information to break.

The error that occurs in the app is: "TypeError: Cannot read property adult of null." But this error shouldn t happen if the "IF" statement worked correctly...

Answer 1

Changing the answer after your update:

The problem is because "null" is different of "undefined" so when you start your application for the first time the initial state of details is defined as null. Just clear your state here:

const [details, setDetails] = useState(null);

纽约总部

const [details, setDetails] = useState();

它将解决你的问题。

For suggestion, you can change your if statement 纽约总部o, and use like this:

if (details) {

友情链接