在useEffect内部调用useRef得到无效挂钩调用错误

Question

如何为尚不存在的元素创建ref？

我有一个动态表单，如何为每个输入创建ref？表单有一个添加新输入选项，所以每次用户单击添加新输入时，我都必须动态创建一个新的ref？

我在做这件事时出错，不起作用：

useEffect(() => {
const inputRef = useMemo(() => Array(totalInput).fill(0).map(i => useRef()), []);
}, [createdInput])

但是如果我做这个

const inputRef = useMemo(() => Array(totalInput).fill(0).map(i => useRef()), []);
console.log(inputRef)

inputRef在数组中只有1个项。

Answer 1

如果输入是动态的，而不是对每个输入使用一个ref，则可以考虑使用DOM方法，并对父对象使用一个单独的ref。例如：

return (
<div ref={containerRef}>
{inputDatas.map(inputData => <Input inputData={inputData} />)}
</div>
);

然后选择第1个n输入，使用：

containerRef.current.children[n]

要使用的选择方法将取决于您的输入结构。你可能想要containerRef.current.querySelectorAll('input')[n]这样的东西。