如何使用useEffect设置setParams并避免获得不确定的渲染？

Question

我正在使用，react-navigation并且有一个动态标头，所以我正在使用setParams并在标题中获取它。

const MyComponent = ({navigation}) => {
    useEffect(() => {
        const { setParams, state } = navigation
        const { params = {} } = state
        const { description } = params
        setParams({ headerTitle: description })
    }, [])

    return (...)
}

MyComponent.navigationOptions = ({ navigation }) => ({
    title: navigation.getParam('headerTitle')
})

这里的问题是我只想执行setParams一次（所以我使用[]），但是得到警告（eslint(react-hooks/exhaustive-deps)）并说我需要添加navigation到依赖项数组。

如果我添加navigation到依赖项数组，它将成为无限循环。

setParam更新=> navigation调用=> setParam更新=> navigation并继续...

如何setParam只调用一次，并避免相应地正确响应钩子规则？

Answer 1

可以useRef按照这个答案底部的建议解决这个问题吗？

import React, { useRef, useEffect } from 'react';

const MyComponent = ({ navigation }) => {
  const { state } = navigation;
  const { params = {} } = state;
  const description = useRef(params.description);
  const setParams = useRef(navigation.setParams);

  useEffect(() => {
    setParams.current({ headerTitle: description.current });
  }, [description, setParams]);

  return (...);
}

MyComponent.navigationOptions = ({ navigation }) => ({
    title: navigation.getParam('headerTitle')
})

我没有测试过这个，但看起来它应该可以工作。

参考这里是useRef 文档。