React函数组件挂载时如何获取textarea的字符数并更新state

useEffect本身是初始化count变量的合适位置，你遇到的问题是异步操作的时序不匹配导致的。

你初始的空依赖useEffect只会在组件首次挂载后执行一次，此时内部负责填充textarea内容的异步init函数还未执行完成，textarea的value尚未被赋值为最终的初始化内容，你同步执行的长度读取和setCount操作早于异步内容填充的时机，因此无法拿到正确的初始值。

你将计数逻辑放到异步init的Promise resolve回调中的解决方案是合理的，保证了只有在textarea内容填充完成后才读取长度赋值给count，符合执行时序要求。

另外还有更符合React受控组件设计的优化方案可供参考：

• 由于你使用的是受控textarea组件，value直接绑定book.content，更推荐直接依赖book.content状态计算字符数，不需要操作DOM ref，全场景覆盖初始化、用户修改的计数更新需求：

useEffect(() => {
  setCount(book.content?.length || 0)
}, [book.content])

• 现有代码中的keyUp事件监听逻辑可以简化，也可以合并到handleChange回调中统一处理，避免重复的状态更新逻辑：

const handleChange = (e) => {
  // 原有处理book.content更新的逻辑保留
  setCount(e.target.value.length)
}

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