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 .
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...
}, [])
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 />
}
...
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(() => {}, [])