反应原生 useEffect 进入死循环：

Question

export default function CreatePage() {
let [state,setState]=useState({})
let flag=true
useEffect(()=>{
    if(flag){
        axios.get('http://192.168.43.151:3001/data').then((res)=>
    {
        console.log(res.data)
        setState({...res.data})
        flag=false
        console.log(false)
      
    }
    ).catch((err)=>{console.log(err)}).finally(()=>{flag=false})

    }

    
})


return (
    <View >
        <Text>hh</Text>
        <Icon name="heart" size={24} color="#4F8EF7" />
        <Text>first page</Text>
        <Text>{state.name}</Text>
        
    </View>
)

}

after the code is executed,the terminal continues showing:

    {"age": 25, "name": "connor", "password": "123456"}
 LOG  false
 LOG  {"age": 25, "name": "connor", "password": "123456"}
 LOG  false
 LOG  {"age": 25, "name": "connor", "password": "123456"}
 LOG  false

i have confusion about this,useEffect function should be rendered once.However,it seems continuing to be redered.

Answer 1

to execute useEffect only once you have to add dependency array with no dependency. Something like this:

useEffect(() => {
    // this code will execute only once after first render.
   // some code...
}, [])

Answer 2

You did not add a dependency array to the useEffect function. Therefore, it is bound to be an infinite reRendering.

And react does not recommend let . Use the status value.

You can add a dependency array

const [state,setState] = useState({});
const [flag,setFlag] = useState(true);
useEffect(()=>{
    if(flag){
        axios.get('http://192.168.43.151:3001/data').then((res)=>
    {
        console.log(res.data)
        setState({...res.data})
        setFlag(false)
        console.log(false)
      
    }
    ).catch((err)=>{console.log(err)}).finally(()=>{flag=false})

    }

    
},[])


if(flag) {
   return <LoadingElem />
}

...

Answer 3

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument to the useEffect .

useEffect(() => {}, [])

Answer 4

Can you try this? you have to put the flag into a state or else in every render it will be false.

export default function CreatePage() {
    let [state,setState]=useState({})
    let [flag,setFlag]=useState(true)
    useEffect(()=>{
        fetchData()
    },[])
    
    const fetchData = async ()=>{
        if(flag){
                axios.get('http://192.168.43.151:3001/data').then((res)=>
            {
                console.log(res.data)
                setState({...res.data})
                setFlag(false)
                console.log(false)
            
            }
            ).catch((err)=>{console.log(err)}).finally(()=>{setFlag(false)})
        
        }
    }
    
    
    return (
        <View >
            <Text>hh</Text>
            <Icon name="heart" size={24} color="#4F8EF7" />
            <Text>first page</Text>
            <Text>{state.name}</Text>
            
        </View>
    )
}