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

Question

我是 React-Native 的新手，正在学习有关 react-native 的课程。这个 git 中心链接到我的存储库代码有问题（无限循环）我在以下问题中描述。我花了 12 个多小时试图解决这个问题。如果可以，请帮我解决这个问题。

useEffect in question

以上图片目录：'src/features/restaurants/components/search.components.js'

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

以上代码创建了一个反馈循环，导致应用不断从模拟 api 获取位置信息，returns 加载到屏幕，然后快速重新加载广告 infinitum.Its 预期目的是运行一次组件挂载以引起一次默认搜索。相反，search.component 运行中的这个 useEffect() 会重复它的回调。 useEffect 未跟踪已更改的依赖项，并给定 [] 一个空数组代替依赖项

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

useEffect 的这种语法不应该在挂载后仅运行一次，如果有更新则不应该再次运行吗？如果我的理解是正确的，这个使用效果怎么可能是运行ning死循环？

这个 useEffect() 是罪魁祸首，因为无限重新加载循环在这个 useEffect() 被删除时停止。
此逻辑链下的所有其他功能不会创建无限循环，因为在通过 onSubmitEditing 启动的搜索方法中无需循环即可正常工作。

Answer 1

试试这个：

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

Answer 2

这个无限循环的问题是由这个位置对象引起的 here，可能是因为每次重新呈现 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, and not

Tip: useEffect依赖一定要避免object, array or function，必要时需要用useMemo或useCallback

记忆

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

useEffect() in my search Bar component causes an infinite loop, that I cannot understand

reactjs

react-native

use-effect