如何修復 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>
    }