Создание запроса get для получения списка список книг из API Google books

#react-native #google-api

#react-native #google-api

Вопрос:

Файл поиска как вы можете видеть, я делаю запрос get к Google api, но перед отображением этой страницы поиска он уже выдает мне сообщение об ошибке undefined не является объектом (оценка ‘items.volumeInfo’), как если бы я удалил это {result === undefined ? строка null :} и попробуйте запустить код, который даст мне идеальное название первой книги в массиве (как в консоли search().журнал работает отлично) после правильного поиска

 import React, {useState, useEffect} from 'react';
import { View, Text } from 'react-native';
import SearchBar from '../components/SearchBar';
import axios from 'axios';
import RenderList from '../components/RenderList';



function SearchScreen() {

    const [term, setTerm] = useState("");
    const [result, setResult] = useState([]);
    const [errorMessage, setErrormessage] = useState("")


    const search = async () => {
        const res = await axios.get(`https://www.googleapis.com/books/v1/volumes?q=${term}:keyesamp;key=AIzaSyDfYS8u4y8OADwoUIkl0gYOl0SJQ4GLuaA`, {
            headers: {
                Accept: "application/json",
                "Content-Type": "application-json"
            }
        })
        setResult(res.data.items)
        console.log(res.data.items[0].volumeInfo.title)
    }

    

    return (
        <View>
            <SearchBar 
              term={term} 
              onTermChange={newTerm => setTerm(newTerm)} 
              onTermSubmit={() => search()} 
            />
            {result === undefined ? null : <RenderList result={result} />}
        </View>
    )
}

export default SearchScreen;
 

Файл рендеринга

 import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';


function RenderList({result}) {
    return (
        
            <FlatList 
              data='result'
              renderItem={({items}) => {
                  return <Text>{items.volumeInfo.title}</Text>
              }} />
        
    )
}

export default RenderList
 

Ответ №1:

Попробуйте вызвать API в useEffect()

    useEffect((
apiCall();)=>{},[searchedText])
 

Не могли бы вы, пожалуйста, показать код панели поиска?