当我在react native中导航时,没有调用Effect

axr492tv  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(145)

当我在react native中导航到此页面时,useEffect没有被调用。
问题如下:我有.js文件来处理我的函数和数据,给予它给.jsx来构建我的UI。当我导航时,我输入js文件,然后构建UI。
这是我遇到的问题代码:

import React, { useState, useEffect } from "react";

import PublicacionPropiedadUI from './publicacionPropiedadUI';
import { getAssetById } from '../../../api/assetsAPI';

export default function PublicacionPropiedad({ route }) { //tendria que recibir id para hacer una busqueda en bd
    const { propiedadId } = route.params;

    const [propiedad, setPropiedad] = useState([])
    //const [botones, setBotones] = useState(false)
    console.log(propiedadId,'45');
    useEffect(() => {
        let respuesta
        const busquedaPropiedades = async () => {

            try {
                console.log(propiedadId,'4');
                respuesta = await getAssetById(propiedadId)
                console.log(respuesta);
                setPropiedad(respuesta.asset[0]);

   
            }
            catch (error) {
                console.error('Error al obtener la busqduedass:', error);
            }



        };

        busquedaPropiedades()
 

        /* setPropiedad(detallePropiedad)
        analisisBtnera() */

    }, [])


    //console.log(propiedad, 'trass');
    return (

        <PublicacionPropiedadUI propiedad={propiedad} />

    )
}

字符串
这段代码和我在另一个页面上的代码完全一样,而且运行得很好。
我到处试了console.log,确定它没有输入useEffectuseEffect用于调用一个API,它也可以工作。

gab6jxml

gab6jxml1#

这是React Navigation的默认行为,以避免每次用户访问之前访问过的屏幕时不必要的屏幕重新呈现。
使用useFocusEffect钩子来处理副作用,或者简单地使用useIsFocused值作为标准useEffect的依赖:

import React, { useState, useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";
import PublicacionPropiedadUI from "./publicacionPropiedadUI";
import { getAssetById } from "../../../api/assetsAPI";

export default function PublicacionPropiedad({ route }) {
  //tendria que recibir id para hacer una busqueda en bd
  const { propiedadId } = route.params;
  const isFocused = useIsFocused();
  const [propiedad, setPropiedad] = useState([]);
  //const [botones, setBotones] = useState(false)
  console.log(propiedadId, "45");
  useEffect(() => {
    let respuesta;
    const busquedaPropiedades = async () => {
      try {
        console.log(propiedadId, "4");
        respuesta = await getAssetById(propiedadId);
        console.log(respuesta);
        setPropiedad(respuesta.asset[0]);
      } catch (error) {
        console.error("Error al obtener la busqduedass:", error);
      }
    };

    busquedaPropiedades();

    /* setPropiedad(detallePropiedad)
        analisisBtnera() */
  }, [isFocused]);

  //console.log(propiedad, 'trass');
  return <PublicacionPropiedadUI propiedad={propiedad} />;
}

字符串

相关问题