网址参数未更改时,React防止重新获取

时间:2019-10-15 21:35:50

标签: reactjs redux

我有一个ExperienceList组件,可获取mount上的所有项目。当用户单击一种特定的体验,然后导航回到ExperienceList时,就会出现我要实现的功能。当前,每次制作fetch

我想做一个简单的检查,以查看cityname中的url params是否与cityname中的redux store相匹配。如果相同,则跳过获取。如果不是,请执行此操作。 这是我尝试过的2种方法,没有运气:

第一种方法

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

使用上述方法,出现控制台错误:

  

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

我不能100%确定为什么列表不可用,因为我可以将其记录到控制台。 这是第二种方法

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

这种方法也不起作用,但是我对为什么这样做感到困惑。据我了解,出现在dependencies array的{​​{1}}中的变量将导致useEffectfunction调用之间不同的情况下执行。在这种情况下,我可以保证function在2个不同的渲染之间是相同的,但是每次都会进行提取。

是否有关于如何优化此过程的见解?

1 个答案:

答案 0 :(得分:0)

函数读取列表实际上是useEffect的部门,您必须告诉useEffect。或者您可以将其更改为城市名称参数。

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])