useEffect()在我的搜索栏组件中导致无限循环，我无法理解

Question

我是React-Native的新手，正在跟随React-Native的课程。这个git hub链接到一个我的仓库，代码有我在下面的问题中描述的问题(无限循环)。我花了12个多小时试图弄清楚这一点。如果你能的话，请帮我弄清楚这个问题。

https://github.com/JohnyClash/mealsToGo

有问题的useEffect

上面的照片目录:'src/features/restaurants/components/search.components.js'

    useEffect(() => {
    search(searchKeyword);
}, []);

上面的代码创建了一个反馈循环，使应用程序不断地从模拟api中获取，该api返回位置信息，加载到屏幕上，然后无限快速地重新加载。其预期目的是在组件挂载上运行一次，以产生一次默认搜索。相反，search.component中的This useEffect()会重复运行它的回调函数。useEffect不跟踪已经更改的依赖项，并且在依赖项

的位置给[]一个空数组。

useEffect(callback,dependencies)
useEffect(callback,[])

useEffect的语法不应该只在挂载后运行一次，而不是在更新后再次运行吗?如果我的理解是正确的，这种使用效果怎么可能在无限循环中运行?

• this useEffect()是罪魁祸首，因为当this useEffect()被删除时，无限加载循环停止。
• 这个逻辑链上的所有其他功能都不会创建一个无限循环，因为在通过onSubmitEditing启动的搜索方法中，没有循环也能很好地工作。

Answer 1

这个无限循环的问题是由这个location对象引起的，可能是因为每次LocationContext被重新渲染(搜索完成或状态更新)时，它都会创建一个location对象的新实例，这使得useEffect再次被调用，然后它再次搜索，在再次调用useEffect时重新创建location对象，这使得新的搜索，更新一些状态并重新创建location对象…

带无限循环问题的代码:

    useEffect(() => {
        console.log(location)
        if (location) {
            const locationString = `${location.lat},${location.lng}`;
            retrieveRestaurants(locationString);
        }
    }, [location]);

如果你这样做，可能会解决这个问题:

  useEffect(() => {
    if (location?.lat && location?.lng) {
      const locationString = `${location.lat},${location.lng}`;
      retrieveRestaurants(locationString);
    }
  }, [location?.lat, location?.lng]);

也要小心setTimeout，不要在组件卸载时清除它

提示:始终避免使用useEffect依赖中的对象、数组或函数，如果必要的话，需要使用useMemo或useCallback来记忆它。

Answer 2

Try This:

useEffect(() => {
  search(keyword)
}, [keyword])