为什么这个 React 组件在依赖变化时不更新？答案

【问题标题】：Why isn't this React component updated when dependency changes?为什么这个 React 组件在依赖变化时不更新？
【发布时间】：2023-01-25 03:09:28
【问题描述】：

我有一个带有搜索栏的简单 React 组件，它获取输入值并导航到将输入值设置为查询参数的 URL。一旦进入组件，它就会从 URL 查询参数中获取“关键字”并调用 API 来获取结果。

它只在第一次起作用。但是，如果我更改输入值，它不会更新“关键字”变量值，即使 URL 已正确更新。

为什么我的变量没有更新？

export default function Resultados () {

    let keyword = new URLSearchParams(window.location.search).get('keyword')

    const apiKey = '123' ;

    useEffect(()=>{
        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)
            })

    },[keyword])

    return (
        <>
            <h2>Resultados de {keyword}</h2>
        </>
    )
}

我在 useEffect 依赖数组中包含了关键字变量，但变量似乎没有改变。

【问题讨论】：

你在使用react-router吗？如果是，你可以使用useSearchParams()

标签： javascript reactjs variables

【解决方案1】：

你有 handleOnChange 方法吗？您是否也研究过使用 useState 挂钩？

【讨论】：

【解决方案2】：

反应组件只会在状态被设置时重新渲染（无论是在此处还是在某些父组件中）。如果未设置状态，则组件不会重新呈现。 useEffect 的依赖数组只有在组件是已经渲染，然后如果没有任何变化，依赖数组可以跳过效果。

要收到有关位置更改的通知，您可能希望使用现有的路由库，例如 react-router 或 react-location。例如，这是你在 react-router 中的做法：

import { useSearchParams } from 'react-router';

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

  // rest of your code is the same
}

【讨论】：