我在哪里违反勾手规则

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({})

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

Answer 1

您已经在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;