如何修复 React Hook useEffect 缺少依赖项

Question

我对这个 eslint 错误进行了一些研究，并尝试实施一些帖子中解释的解决方案。 但实际上他们让事情变得更糟。 因为，如果我接受在控制台中显示警告，那么我的应用程序似乎可以工作。 一旦我实施了建议的解决方案之一，该应用程序就会失败并显示错误，告诉我渲染过多存在问题。

基本上，我有一个使用“useState”的地区和城市的列表。 当页面显示时，我想将一个区域设置为选中。 由于城市是区域变量的一部分，我还显示了连接到所选区域的城市。 为了实现这一点，我使用了 useEffect。 或多或少以这种方式：

    const [regions, setRegions] = useState(
        {
            region: 'region1', id: 1, cities: {name: 'city1', id: 1}
            ,region: 'region2', id: 2, cities: {name: 'city2', id: 1}
        }
    );
    const updateCityList = () => {
        let found = regions.find(el => el.className === 'selectedRow');
        setCities(found.cities);
    }
    useEffect(() => {
        const newArr = [...regions];
        newArr.find(el => el._id === 1).className = 'selectedRow';
        setRegions(newArr);
        updateCityList();
    }, []); 

现在，在控制台中，我看到了警告：

React Hook useEffect has missing dependencies: 'regions' and 'updateCityList'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

将函数放在 useEffect 的数组中，将导致重新渲染错误。 我也尝试过使用“useCallback”。 但是我遇到了类似的错误。 使用“忽略下一行”似乎没有抑制警告。 但是，我更愿意解决这个警告，而不是试图隐藏一个可能的问题。

Answer 1

在这个使用效果中：

    useEffect(() => {
        const newArr = [...regions];
        newArr.find(el => el._id === 1).className = 'selectedRow';
        setRegions(newArr);
        updateCityList();
    }, []); 

您应该添加一个标志来检查效果是否已经运行一次（如果是则立即返回），因此效果不会再次更新区域 state 导致无限渲染。

就像是：

    useEffect(() => {
        if (!flag)
            flag = true;
        else
            return;
        <Your logic>
    }