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)），并说我需要添加{{1 }}到依赖项数组。

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

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

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

Answer 1

_startFilePicker() async { InputElement uploadInput = FileUploadInputElement(); uploadInput.click(); uploadInput.onChange.listen((e) { // read file content as dataURL final files = uploadInput.files; if (files.length == 1) { final file = files[0]; final reader = new FileReader(); reader.onLoadEnd.listen((e) { _handleResult(reader.result); }); reader.readAsDataUrl(file); } }); }可以按照answer底部的建议来解决吗？

useRef

我还没有测试过，但是看起来应该可以。

useRef docs这里供参考。

Answer 2

我晚了一年，但是据我所知，setParams被调用时，导航已更新，因此该组件将重新呈现。如果导航是依赖项数组的一部分，则useEffect也将再次运行。诀窍是根据当前的导航参数有条件地运行setParams。就您而言：

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

这有点奇怪，尽管您要用一个也是nav参数的值更新nav参数。直接使用它似乎更简单：

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

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

2 个答案: