React中useState数组长度不变化？useEffect调用时始终为0的原因

你遇到的问题是闭包捕获导致的：

• 你的useEffect依赖是[]，所以它只会在组件首次挂载时执行一次，此时内部调用的addElement函数捕获的是组件初始状态下的inputElementArray——也就是空数组。
• React的state更新是异步批量处理的，两次调用addElement时，都还没等到前一次的state更新生效，所以每次读取inputElementArray.length都是初始的0，两次更新最终只会把最后一个input加入数组，因为两次都是基于空数组展开添加。

直接改用函数式更新来修改state，这样每次更新都会基于最新的state值，而不是闭包里的旧值：

function view() {
  const [inputElementArray, setInputElementArray] = useState<HTMLInputElement[]>([]);

  useEffect(() => {
    addElement();
    addElement();
  }, [])

  const addElement = () => {
    let input = document.createElement("input");
    // 用函数式更新，prev是当前最新的state
    setInputElementArray(prev => [...prev, input])
  }
}

如果后续需要在其他地方调用addElement，建议用useCallback包裹它，避免不必要的重渲染，同时确保捕获到最新的state更新逻辑：

const addElement = useCallback(() => {
  let input = document.createElement("input");
  setInputElementArray(prev => [...prev, input])
}, [])

内容的提问来源于stack exchange，提问作者sander