“错误：无效的钩子调用。只能在 function 组件的主体内部调用钩子。”在反应原生 expo

Question

1. 测试屏幕.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

所以这是我的代码......我在几个网站上尝试了不同的解决方案，但仍然遇到同样的错误。

我是本机反应的新手，如果可能的话，任何人都可以指出我在代码结构中的错误是什么？

谢谢你。

Answer 1

问题是您在按下按钮时正在调用一个组件并返回 UI 元素而不是 function，所以我建议这样的事情（我不确定您的数据结构，但这应该让您在右边至少跟踪）

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>

  )
}