传递给组件的zipcode prop为何失效？硬编码URL正常却报404

问题现象 #

传递给React组件的zipcode prop作为URL参数请求Laravel API时返回404错误，但硬编码相同数值（如44366）却能正常获取数据，数据库表中zipcode字段为整数类型。

正常运行的代码 #

export default function LocationComponent({ zipcode }) {
    const [loading, setLoading] = useState(false);
    const [zipData, setZipData] = useState([]);

    const getZipData = (url) => {
       console.log("zip", zipcode); 
        url = url || `/zipcode/44366`;
        setLoading(true);
        axiosClient.get(url).then(({ data }) => {
            setZipData(data.data);
            setLoading(false);
        });
    };

    useMemo(() => {
        getZipData();
    }, []);

    return ( ... )
}

触发报错的代码 #

报错信息：axios.js?v=9f03c4fa:1511 GET http://localhost:8000/api/zipcode/44366 404 (Not Found)

export default function LocationComponent({ zipcode }) {
    const [loading, setLoading] = useState(false);
    const [zipData, setZipData] = useState([]);

    const getZipData = (url) => {
       console.log("zip", zipcode);
        url = url || `/zipcode/${zipcode}`;
        setLoading(true);
        axiosClient.get(url).then(({ data }) => {
            setZipData(data.data);
            setLoading(false);
        });
    };

    useMemo(() => {
        getZipData();
    }, []);

    return ( ... )
}

对应的Laravel API路由 #

Route::get('zipcode/{zipcode}', function (int $zipcode) {
    return new ZipcodeResource(Zipcode::findOrFail($zipcode));
});

排查分析 #

1. useMemo依赖缺失：当前useMemo的依赖数组为空，仅在组件初始化时执行一次getZipData。若zipcode是父组件异步获取后传递的prop，初始化时zipcode可能未拿到有效值；即使初始值正确，后续zipcode更新时也不会重新触发请求。另外，useMemo设计用于缓存计算结果，不适合处理数据请求这类副作用逻辑。
2. zipcode类型或格式问题：虽然数据库字段是整数，但如果传递的zipcode是字符串类型（如带空格、引号或其他隐藏字符），拼接URL后可能导致Laravel路由无法匹配（尽管报错URL显示数值正确，仍需确认console.log输出的zipcode是否为纯净的数字）。
3. 请求时机问题：组件初始化时zipcode可能尚未被正确赋值，导致请求的URL参数无效。

解决方案 #

1. 替换useMemo为useEffect并添加依赖 #

用useEffect处理数据请求副作用，并将zipcode加入依赖数组，确保zipcode变化时自动重新请求：

export default function LocationComponent({ zipcode }) {
    const [loading, setLoading] = useState(false);
    const [zipData, setZipData] = useState([]);

    const getZipData = () => {
        console.log("zip", zipcode);
        // 确保zipcode是有效整数
        const validZip = Number(zipcode);
        if (isNaN(validZip)) {
            setLoading(false);
            return;
        }
        const url = `/zipcode/${validZip}`;
        setLoading(true);
        axiosClient.get(url)
            .then(({ data }) => {
                setZipData(data.data);
            })
            .catch(err => {
                console.error('请求失败:', err);
            })
            .finally(() => {
                setLoading(false);
            });
    };

    useEffect(() => {
        getZipData();
    }, [zipcode]); // 监听zipcode变化

    return ( ... )
}

2. 验证zipcode的有效性 #

在请求前对zipcode进行类型转换和有效性校验，避免无效参数传递给API。

3. 确认Laravel路由配置 #

确保路由位于api前缀分组内（与报错URL的/api路径对应），且Zipcode模型的findOrFail方法确实能找到对应数值的记录（可在路由闭包中添加日志验证传入的$zipcode值）。

内容的提问来源于stack exchange，提问作者KathyBBB