reactjs - 即使存在依赖关系，如何运行 useEffect 一次？为什么 ESLint 会提示它？

Question

考虑以下示例:

const userRole = sessionStorage.getItem('role');
const { data, setData, type, setTableType } = useTable([]);

useEffect(() => {
  const getData = async () => {
    // fetch some data from API
    const fetchedData = await axios('..');
    
    if (userRole === 'admin') {
     setData([...fetchedData, { orders: [] }]);
    } else {
     setData(fetchedData);
    }
    
    if (type === '1') {
     setTableType('normal');
    }
  };
  getData();
}, []);

我只想在安装时运行这个效果，就是这样，我不在乎 userRole或 setData有没有变!
所以，现在我的问题是:

为什么 ESLint 提示 userRole失踪在
依赖数组？它甚至不是一个国家!

为什么 ESLint 是
投诉 setData在依赖项数组中丢失
它不会总是相同的引用还是会改变？

如何在不打扰 linter 的情况下实现我想要的？或者我应该直接扇老头// eslint-disable-line react-hooks/exhaustive-deps线？或者这绝对是野蛮的？

为什么这表明我的代码中存在错误？我只想运行这个效果
一次使用最初可用的任何东西。

编辑:
让我重新表述这个问题，如果这些变量发生变化而我不关心它们的新值怎么办？特别是当 type正在同一文件中的不同位置进行更新。我只想读取初始值并运行一次 useEffect 如何实现？

react-hooks/exhaustive-deps warning

Answer 1

用户角色在 useEffect因此它是一个依赖项(如果它会改变 - useEffect 无效)

useEffect不知道它是否相同，这就是为什么它要求依赖

通常执行 linter 要求的操作，并将这两个添加到依赖项数组中。

const userRole = sessionStorage.getItem('role');
const { data, setData } = useTable([]);

useEffect(() => {
  const getData = async () => {
    // fetch some data from API
    const fetchedData = await axios('..');
    
    if (userRole === 'admin') {
     setData([...fetchedData, { orders: [] }]);
    } else {
     setData(fetchedData);
    }
  };
  getData();
}, [userRole, setData]);

here's Dan Abramov's take on this

“But I only want to run it on mount!”, you’ll say. For now, remember: if you specify deps, all values from inside your component that are used by the effect must be there. Including props, state, functions — anything in your component.