reactjs - React Hook useEffect 缺少依赖项
问题描述
我正在尝试根据我的窗口大小计算一些数据。
每次我们调整窗口大小时,我都会计算可以放在标签栏中的标签数量。我为此使用了钩子useWindowSize
。react-use
问题是 linter 抱怨说:
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 */]);
我的问题是每次宽度变化时如何重新计算一些数据并将它们设置在我的组件中?
解决方案
推荐阅读
- javascript - 我如何返回结果而不是两者
- jquery - 根据第一次选择中选择的选项过滤第二次选择中的选项
- swift - UIView 动画只能工作一次而不是不能工作
- linux - Flutter,Linux没有显示为设备
- java - ArrayIndexOutOfBoundsException:索引 256 超出 java 中长度 256 的范围
- apache-kafka - 卡夫卡指标 | 为什么我在指标报告中看到额外的节点 ID node--1 和 node--2
- web-scraping - 如何使用 R-selenium 点击展开列表
- c# - Gridview 工具提示不限制列文本以设置字符数量
- javascript - 在谷歌地图 api 中将信息从反应标签传递到方法的问题
- ruby-on-rails - Ruby 使用对象数组进行 put / post http 调用