时间戳

首页 > 解决方案 > 当 url 参数未更改时，React 防止重新获取

reactjs - 当 url 参数未更改时，React 防止重新获取

问题描述

我有一个ExperienceList组件可以获取mount. 当用户单击一种特定体验，然后导航回ExperienceList. 目前，fetch每次都制作一个。

我想做一个简单的检查，看看citynamefrom是否url params与cityname在redux store. 如果相同，则绕过获取。如果没有，那就去做吧。这是我尝试过的两种方法，但没有运气：

第一种方法

  useEffect(() => {
    if (props.match.params.cityname !== list[0].city) {
      readList(apiRequestParams)
    }
  }, [])

使用上述方法，我得到控制台错误：

无法读取未定义的属性“城市”。

我不能 100% 确定为什么 list 不可用，因为我可以将它记录到控制台。这是第二种方法：

  useEffect(() => {
      readList(apiRequestParams)
  }, [props.match.params.cityname])

这种方法也不起作用，但我更困惑为什么会这样。据我了解，出现在dependencies arrayof中的变量useEffect将导致function执行当且仅当它们在function调用之间不同时。在这种情况下，我可以保证props.match.params.cityname在 2 个不同的渲染之间是相同的，但每次都会进行一次提取。

关于如何优化此过程的任何见解？

标签： reactjsredux

解决方案

函数readlist其实就是useEffect的dep，你要告诉useEffect。或者您可以将其更改为 cityname 参数。

const [cityName, setcityName] = useState('cityname');

useEffect(() => {
  function getFetchUrl() {
    return 'https://...' + cityName;
  }

  async function fetchData() {
    const result = await readList(getFetchUrl());
    setData(result.data);
  }

  fetchData();
}, [cityName]);

或者

const fetchData = useCallback(() => {
  readList("https://" + cityName);
}, [cityName]); 

useEffect(() => {
  fetchData()
},[fetchData])

推荐阅读