react-hooks 常见错误汇总

常见错误

• Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
  在使用react封装了一个公用组件时，组件中使用了connect连接redux后的组件，然后其他地方引用该组件后就提示以上警告，虽然不影响使用，但看着不舒服。
  解决方法：
  导出组件时使用：

export default connect(

stateToProps, null, null, { forwardRef: true }

)(SelectEnumNode);

• 异步操作的坑
  ① 使用 useEffect 发起异步任务，第二个参数使用空数组可实现组件加载时执行方法体，返回值函数在组件卸载时执行一次，用来清理一些东西，例如计时器。
  ② 使用 AbortController 或者某些库自带的信号量 (axios.CancelToken) 来控制中止请求，更加优雅地退出。
  ③ 当需要在其他地方（例如点击处理函数中）设定计时器，在 useEffect 返回值中清理时，使用局部变量或者 useRef 来记录这个 timer。不要使用 useState。
  ④ 组件中出现 setTimeout 等闭包时，尽量在闭包内部引用 ref 而不是 state，否则容易出现读取到旧值的情况。
  ⑤ useState 返回的更新状态方法是异步的，要在下次重绘才能获取新值。不要试图在更改状态之后立马获取状态。可以使用useRef存储值
• React Hooks 异步操作踩坑记
• 使用编辑器braft-editor 前端页面无法展示空格
  • 解决: 无法识别空格的问题大家都是怎么解决的

// 富文本内容的空格处理
#editor p{
  white-space: pre-wrap;
}