React Native页面导航时useEffect未触发的问题求助

问题场景 #

在React Native开发中，页面导航时出现useEffect未触发的情况。项目采用业务逻辑与UI分离的结构：一个.js文件负责数据处理和函数逻辑，向.jsx UI文件提供数据，导航时先进入该js文件再渲染UI。当前页面代码与另一正常运行的页面完全一致，但通过console.log确认未进入useEffect，且调用的getAssetById API本身可用。

相关代码 #

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} />


    )
}

解决方案 #

1. 修正useEffect依赖数组 #

当前useEffect的依赖数组为空[]，但内部用到了路由参数propiedadId。空依赖数组会让useEffect仅在组件首次挂载时执行一次，若导航时组件被复用（如React Navigation栈导航默认复用组件），则不会重新触发。将propiedadId加入依赖数组，确保参数变化时重新执行逻辑：

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()
}, [propiedadId]) // 添加propiedadId到依赖数组

2. 使用useFocusEffect替代普通useEffect #

React Navigation的组件复用机制会导致普通useEffect在页面再次进入时不触发，改用useFocusEffect可确保每次页面获得焦点时执行逻辑：

import React, { useState } from "react";
import { useFocusEffect } from '@react-navigation/native'; // 导入useFocusEffect
import PublicacionPropiedadUI from './publicacionPropiedadUI';
import { getAssetById } from '../../../api/assetsAPI';

export default function PublicacionPropiedad({ route }) {
    const { propiedadId } = route.params;
    const [propiedad, setPropiedad] = useState([])

    useFocusEffect(
        React.useCallback(() => {
            const busquedaPropiedades = async () => {
                try {
                    console.log(propiedadId,'4');
                    const respuesta = await getAssetById(propiedadId)
                    console.log(respuesta);
                    setPropiedad(respuesta.asset[0]);
                }
                catch (error) {
                    console.error('Error al obtener la busqduedass:', error);
                }
            };

            busquedaPropiedades();

            return () => {
                // 可选：页面失去焦点时的清理操作，比如取消API请求
            };
        }, [propiedadId])
    );

    return (
        <PublicacionPropiedadUI propiedad={propiedad} />
    )
}

3. 强制组件重新渲染 #

若组件复用问题依然存在，可通过给UI组件添加唯一key属性，强制组件在路由参数变化时重新挂载：

return (
    <PublicacionPropiedadUI key={propiedadId} propiedad={propiedad} />
)

4. 验证路由参数变化 #

确认每次导航传递的propiedadId是否确实不同。若两次导航参数相同，即使添加依赖，useEffect也不会重复触发。此时可在参数相同时手动触发数据刷新，或确保导航时参数唯一。

内容的提问来源于stack exchange，提问作者Agustín Forti