在useEffect中调用useRef得到了无效的挂钩调用错误

Question

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

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

我在执行此操作时出错，无法正常工作

  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>
);

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

containerRef.current.children[n]

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