reactjs - 我在哪里违反了钩子(Hook)规则？

Question

import { StyleSheet, Text, View } from 'react-native'
import * as firebase from 'firebase';

//firebaseinititalized//

const[message,setMessage]=useState('');
const [messages, setMessages] = useState([])

useEffect(() => {
    firebase.database.ref().child('messages').once('value',
        snapshot=>{
            const data=snapshot.val()
            if(snapshot.val()){
                const initMessages=[];
                Object.
                keys(data).
                forEach(message=>initMessages.push(data[message]));
                (initMessages)=>setMessages([initMessages]);
            }
        }
    )
    firebase.database.ref().child('messages').on("child_added",
        snapshot=>{
            const data=snapshot.val()
            if(snapshot.val()){
               (prevMessages)=> setMessages([data,...prevMessages]);
                }
            }

    )
}, [])

const addItem =()=>{
    if(!message) return;

    const newMessage=firebase.database.ref().child().push();

    newMessage.set(message,()=>setMessage(''));

}


  function Hookfire() {


    return (
        <View >
        <View >
          <TextInput placeholder=" enter text message" 
          value={message} onChangeText={text=>setMessage(text)}/>
          <Button title="send" onPress={addItem}/>
        </View> 
        <FlatList data={messages}
          renderItem={({item})=>
          <View >
            <Text >{item}</Text>
          </View>}
          />
      </View>
    )
}

export default Hookfire

const styles = StyleSheet.create({})

错误消息显示:无效的 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一:1.您的React和渲染器版本可能不匹配(例如React DOM)2. 你可能违反了 Hooks 规则3.您可能在同一个应用程序中拥有多个React副本

Answer 1

您已将钩子(Hook)调用移至 HookFire 函数内。

import { StyleSheet, Text, View } from 'react-native'
import * as firebase from 'firebase';

function Hookfire() {

    const[message,setMessage]=useState('');
    const [messages, setMessages] = useState([])

    useEffect(() => {
        firebase.database.ref().child('messages').once('value',
            snapshot=>{
                const data=snapshot.val()
                if(snapshot.val()){
                    const initMessages=[];
                    Object.
                    keys(data).
                    forEach(message=>initMessages.push(data[message]));
                    (initMessages)=>setMessages([initMessages]);
                }
            }
        )
        firebase.database.ref().child('messages').on("child_added",
            snapshot=>{
                const data=snapshot.val()
                if(snapshot.val()){
                   (prevMessages)=> setMessages([data,...prevMessages]);
                    }
                }

        )
    }, [])

    const addItem =()=>{
        if(!message) return;

        const newMessage=firebase.database.ref().child().push();

        newMessage.set(message,()=>setMessage(''));

    }

    return (
        <View >
        <View >
          <TextInput placeholder=" enter text message" 
          value={message} onChangeText={text=>setMessage(text)}/>
          <Button title="send" onPress={addItem}/>
        </View> 
        <FlatList data={messages}
          renderItem={({item})=>
          <View >
            <Text >{item}</Text>
          </View>}
          />
      </View>
    )
}

export default Hookfire;