我正在尝试将数组状态用于React功能组件。
这是我尝试的代码。
const inputLabel = Array(5).fill(React.useRef(null));
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
inputLabel.map((label, i) => {
setLabelWidth({...labelWidth, [i]: label.current.offsetWidth});
});
}, []);
这是我尝试过的,但显示错误
React Hook React.useEffect has missing dependencies: 'inputLabel' and 'labelWidth'
正在寻找React专家的帮助。谢谢!
答案 0 :(得分:0)
您提到的错误可以通过几种方式解决-How to fix missing dependency warning when using useEffect React Hook?
但是无论如何这都不应该破坏您的应用程序,只是为了警告您。
无论如何,它看起来像setLabelWidth在效果中将LabelWidth设置为对象,而不是数组。
总而言之,在这种情况下,您根本不需要使用钩子,您可以在lop中使用{.push()} js数组方法
for(let i = 0; i < InputLabel.length ; i++) {
LabelWidth.push(InputLabel[i])
}
但是如果您仍然想使用钩子这样做并避免错误,我建议使用类似的方法
const [labelWidth, setLabelWidth] = React.useState([]);
React.useEffect(() => {
if (labelWidth.length === 0) {
const inputLabel = Array(5).fill(React.useRef(null));
inputLabel.map((label) => {
setLabelWidth([ ...labelWidth, label.current.offsetWidth ]);
}
});
}, [labelWidth, setLabelWidth]);