我如何在 React-Native 上使用 API 和 axios

Question

i am a student and i began to develop mobile application about books. I am trying to get random books list with use axios and api. I am beginner in React-Native so i tried to find how can I use but many tutorial videos use components for create an app.I use functions. I found some codes for help me but this codes belongs to React.js. I couldnt convert to React-Native. Here are the codes.

import React, { useState } from 'react';
import {View,Text,Button,StyleSheet,TextInput,TouchableOpacity} from 'react-native';

import Axios from 'axios';



const ExploreScreen = () => {
    const [book,setBook] = useState("");
        const [result,setResult] = useState([]);
        const [apiKey,setApiKey] = useState("AIzaSyBW3SP0vixN1EX8VueI9VL5wzbbjTm")

    function handleChange(event){
        const book =event.target.value;
        setBook(book);
    }

    function handleSubmit(event){
        event.preventDefault();
        
        axios.get("https://www.googleapis.com/books/v1/volumes?q="+book+"&key="+apiKey+"&maxResults=40")
        .then(data => {
            console.log(data.data.items);
            setResult(data.data.items)
        })
    }

    return (
        <View style={StyleSheet.contianer}>
            <TextInput
            onChangeText={() => handleChange()}></TextInput>
            <TouchableOpacity
                title="Click here"
                onPress={() => handleSubmit()}/>
            {result.map(book =>(
                <a target="_blank" href={book.volumeInfo.previewLink}>
                <Image src={book.volumeInfo.imageLinks.thumbnail} alt={bookTitle}
                />
                </a>
            ))}
        </View>
    );
};
export default ExploreScreen;

const styles=StyleSheet.create({
    contianer: {
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    }
}) 

Answer 1

I haven't watched it closely, but the error you are referring:

undefined is not an object evualating.event.target

is because both onChangeText and onPress have no arguments, thus event is undefined when the function is called.

You should instead pass the event as an argument, for example:

onChangeText={event => handleChange(event)}

You can find an example of both components with examples on the documentation: https://reactnative.dev/docs/textinput

https://reactnative.dev/docs/touchableopacity