1. TestScreen.js

export default function TestScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <AlcoResult/>
        
        </View>
        
    );
}

2.AlcoResult.js

import { StyleSheet, Text, View,TouchableOpacity } from 'react-native'
import React from 'react'
import AlcoTestButton from './AlcoTestButton'

const AlcoResult = () => {
  return (
    <View style={styles.container}>
        <TouchableOpacity 
            onPress={()=>AlcoTestButton()}
            style={styles.button}>
                <Text style={{ color: "white"}}>pull data</Text>

      </TouchableOpacity>
    </View>

  )
}

3. AlcoTestButton.js

import { StyleSheet, Text, View, ActivityIndicator, FlatList } from 'react-native'
import React, { useEffect, useState, Component } from 'react'
import { SafeAreaView } from 'react-navigation';

const url = "url";

const AlcoTestButton = () => {

  const [isLoading,setLoading] = useState(true);
  const [alcohol, setAlcohol] = useState([]);
  const [temperature, setTemperature] = useState([]);


  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        setAlcohol(json.alcohol);
        setTemperature(json.temperature);
      })
      .catch((error) =>alert(error))
      .finally(setLoading(false));
  })

  return (
    <SafeAreaView style={styles.container}>
      {isLoading ? (<ActivityIndicator />) :( 
      <View>
        <Text>Alcohol = {alcohol}</Text>
        <Text>Temperature = {temperature}</Text>
      </View>
      )}
    </SafeAreaView>
  )
}

export default AlcoTestButton

So here is my code... I tried different solutions on several websites but still got the same error.

I'm new to react native, If possible could anyone point out what are my errors if any in the structure of the codes?

Thank you.

CodePudding user response：

The problem is that you are calling a component and returning UI elements instead of a function when pressing the button, so i'd suggest something like this (I'm unsure of the structure of your data, but this should put you on the right track at least)

const AlcoResult = () => {
  const [isLoading,setLoading] = useState(false);
  const [alcohol, setAlcohol] = useState();
  const [temperature, setTemperature] = useState(); 

  const fetchData= async ()=>{
    setLoading(true)
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        setAlcohol(json.alcohol);
        setTemperature(json.temperature);
      })
      .catch((error) =>{alert(error)})
      .finally(()=>{setLoading(false)});
  }  

  return (
    <View style={styles.container}>
        <TouchableOpacity 
            onPress={()=>fetchData()}
            style={styles.button}>
                <Text style={{ color: "white"}}>pull data</Text>
        </TouchableOpacity>
        {isLoading && (<ActivityIndicator />)}
        {!isLoading && !!temperature && !!alcohol && 
           <View>
              <Text>Alcohol = {alcohol}</Text>
              <Text>Temperature = {temperature}</Text>
           </View>
        }
    </View>

  )
}