React组件依赖项变化时为何未更新？URL参数变更问题

你定义的keyword是在组件顶层直接从window.location提取的，只有组件首次挂载时才会执行这行代码计算值。当你通过搜索栏修改URL后，组件并没有触发重新渲染，所以这行代码不会再次执行，keyword自然一直是初始值——哪怕把它放进useEffect依赖数组也没用，因为依赖的变量根本没变化。

如果你的项目用了React Router（大部分单页应用都会用），推荐用它提供的API来监听URL变化：

方案1：使用useSearchParams（React Router v6+） #

这是最直接的方式，useSearchParams会返回包含当前查询参数的对象，且URL查询参数变化时会自动触发组件重新渲染：

import { useSearchParams } from 'react-router-dom';
import axios from 'axios';

export default function Resultados () {
    const [searchParams] = useSearchParams();
    const keyword = searchParams.get('keyword');
    const apiKey = '123';

    useEffect(()=>{
        if (!keyword) return; // 避免空关键词发起无效请求
        axios
            .get(`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=es-ES&query=${keyword}&page=1&include_adult=false`)
            .then(res=>{
                console.log(res.data)
            })
            .catch(err => {
                console.error('请求出错：', err);
            })

    },[keyword, apiKey])

    return (
        <>
            <h2>Resultados de {keyword || 'ningún término'}</h2>
        </>
    )
}

方案2：使用useLocation（兼容React Router v5/v6） #

如果用的是React Router v5，或者更习惯操作location对象：

import { useLocation } from 'react-router-dom';
import axios from 'axios';

export default function Resultados () {
    const location = useLocation();
    const apiKey = '123';

    useEffect(()=>{
        const keyword = new URLSearchParams(location.search).get('keyword');
        if (!keyword) return;
        axios
            .get(`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=es-ES&query=${keyword}&page=1&include_adult=false`)
            .then(res=>{
                console.log(res.data)
            })
            .catch(err => {
                console.error('请求出错：', err);
            })

    },[location.search, apiKey])

    const keyword = new URLSearchParams(location.search).get('keyword');

    return (
        <>
            <h2>Resultados de {keyword || 'ningún término'}</h2>
        </>
    )
}

方案3：手动监听URL变化（不依赖React Router） #

如果没用到React Router，可以手动监听浏览器popstate事件，并用状态管理keyword：

import { useState, useEffect } from 'react';
import axios from 'axios';

export default function Resultados () {
    const [keyword, setKeyword] = useState(() => {
        return new URLSearchParams(window.location.search).get('keyword');
    });
    const apiKey = '123';

    // 监听URL变化
    useEffect(()=>{
        const handleUrlChange = () => {
            const newKeyword = new URLSearchParams(window.location.search).get('keyword');
            setKeyword(newKeyword);
        };

        window.addEventListener('popstate', handleUrlChange);
        return () => window.removeEventListener('popstate', handleUrlChange);
    },[])

    useEffect(()=>{
        if (!keyword) return;
        axios
            .get(`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=es-ES&query=${keyword}&page=1&include_adult=false`)
            .then(res=>{
                console.log(res.data)
            })
            .catch(err => {
                console.error('请求出错：', err);
            })

    },[keyword, apiKey])

    return (
        <>
            <h2>Resultados de {keyword || 'ningún término'}</h2>
        </>
    )
}

• React组件只有在状态更新、props变化、父组件重新渲染时才会重新执行顶层代码，单纯的URL变化不会触发重新渲染，必须通过React Router API或手动监听事件来感知。
• 加入错误捕获（.catch）可以帮你排查请求中的问题，避免静默失败。

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