Question

我正在尝试根据窗口大小计算一些数据。
每次调整窗口大小时，我都会计算可放入选项卡栏中的选项卡数量。为此，我使用了useWindowSize中的钩子react-use。

问题是短绒棉抱怨：
React Hook useEffect has missing dependencies: 'navIndex', 'numberOfChunkedElement', 'tabs', and 'value'. Either include them or remove the dependency array.

问题是我无法将value放在依赖项数组中，因为它会导致无限循环。

这是我的代码：

  const [value, setValue] = useState([0, 0]); // [selectedChunckedNavIndex, selectedIndex]
  const [navIndex, setNavIndex] = useState(0);
  const [numberOfChunkedElement, setNumberOfChunkedElement] = useState(0);
  const [chunkedTabs, setChunkedTabs] = useState<TabProps[][]>([[]]);

  /* [...] */

  useEffect(() => {
    // Each time the window is resized we calculate how many tabs wwe can render given the window width
    const padding = 20; // The AppBar padding

    const numberOfTabIcons = navIndex === 0 ? 1 : 2;
    const wrapperWidth =
      wrapper.current.offsetWidth - padding - numberOfTabIcons * 30;
    const flattenIndex = value[0] * numberOfChunkedElement + value[1];
    const newChunkedElementSize = Math.floor(wrapperWidth / 170);

    setNumberOfChunkedElement(newChunkedElementSize);
    setChunkedTabs(chunkArray([...tabs], newChunkedElementSize));
    setValue([
      Math.floor(flattenIndex / newChunkedElementSize),
      flattenIndex % newChunkedElementSize,
    ]);
  }, [width /* , navIndex, numberOfChunkedElement, tabs, value */]);

我的问题是每次宽度改变时如何重新计算一些数据并将其设置在组件中？

React Hook useEffect缺少依赖项

0 个答案: