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> )}
después de ejecutar el código, la terminal continúa mostrando:
{"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 falseTengo confusión acerca de esto, la función useEffect debe representarse una vez. Sin embargo, parece que se continúa reescribiendo.
para ejecutar useEffect solo una vez, debe agregar una matriz de dependencia sin dependencia. Algo como esto:
useEffect(() => { // this code will execute only once after first render. // some code... }, [])No agregó una matriz de dependencia a la función useEffect. Por lo tanto, está destinado a ser una reproducción infinita.
Y reaccionar no recomienda let . Utilice el valor de estado.
Puede agregar una matriz de dependencia
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 /> } ...Si desea ejecutar un efecto y limpiarlo solo una vez (al montar y desmontar), puede pasar una matriz vacía ([]) como segundo argumento para
useEffect.
useEffect(() => {}, [])