是否有适当的方法将USENAvigation()挂钩与usefeffect()依赖关系使用

Question

我正在尝试使用usenavigation((挂钩与我在useffect((中注册的回调进行访问。Linter警告我，usefeffect((缺少依赖关系。如果我将导航挂钩添加为依赖关系，则效果将连续运行。我正在努力避免这种情况，并想知道除了忽略Linter错误外是否有正确的方法。

提供无依赖性阵列会导致效果连续触发的相同行为。

这可能是来自React-Novigation-hooks软件包的USEnavigation((挂钩工作的潜在问题。

function MyComponent() {
    const navigation = useNavigation();
    useEffect(() => {
        navigation.navigate('Home');
    }, []);
}

导致：

React Hook useEffect has a missing dependency: 'navigation'. Either include it or remove the dependency array.

Answer 1

只是一个自以为是的猜测：这是关于"架构"的问题。

例如：自定义useNavigation钩返回函数可以由钩子的消费者而不是具有所有功能的对象调用的 function 是否更有意义？

这是一个示例：

const useNavigation = () => {
  const [routes, setRoutes] = useState(null);
  ...
  const navigate = (destination: string) => {
    console.log("navigated to ", destination);
  };
  return { navigate, routes };
};
function App() {
  const { navigate } = useNavigation();
  return (
    <div className="App">
      <h1>Parent</h1>
      <button onClick={() => navigate("Home")}>Navigate me!</button>
    </div>
  );
}

工作代码框：https：//codesandbox.io/s/usenavigation-95KQL

---

如果您想保留"架构"，则可以使用useRef钩子这样：

const navigation = useRef(useNavigation());
useEffect(() => {
  navigation.current.navigate("Home");
}, []);

Answer 2

我相信错误消息是明确的，您缺少使用效率依赖性：

function MyComponent() {
    const navigation = useNavigation();
    useEffect(() => {
        if (!navigation) return; // <-- this will avoid any undefined or null calls
        navigation.navigate('Home');
    }, [navigation]); // <-- this dependency
}