如何使用 useEffect 设置参数并避免获得无限渲染？答案

【问题标题】：How to setParams using useEffect and avoid getting infinty renderings?如何使用 useEffect 设置参数并避免获得无限渲染？
【发布时间】：2019-11-22 22:48:50
【问题描述】：

我正在使用 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 并避免相应地正确响应钩子规则？

【问题讨论】：

尝试将setParams函数设置为useEffect的依赖。
@Janiis 你不能那样做，setParams 在useEffect 范围内。要将某些内容添加到依赖项数组，它需要在组件范围内。它会给你'setParams' is not defined.
是的，这一定是真的。没有看到你从导航对象中解构了setParams 函数。
遇到了同样的问题。你找到解决办法了吗？
@Jason 现在，唯一可以“修复”它的是禁用 eslint 规则。你介意投赞成票，以便让更多人解决这个问题吗？

标签： reactjs react-native react-navigation react-hooks

【解决方案1】：

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

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 docs。

【讨论】：

【解决方案2】：

我迟到了一年，但是……据我所知，当setParams 被调用时，导航会更新，因此组件将重新渲染。如果导航是依赖数组的一部分，那么 useEffect 也会再次运行。诀窍是根据当前导航参数有条件地运行setParams。在你的情况下：

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

虽然您正在使用一个也是导航参数的值更新导航参数，但这有点奇怪。直接使用它似乎更简单：

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

【讨论】：