Question

我有一个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}}中的变量将导致useEffect在function调用之间不同的情况下执行。在这种情况下，我可以保证function在2个不同的渲染之间是相同的，但是每次都会进行提取。

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

Answer 1

函数读取列表实际上是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])

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

1 个答案: