在 useMemo 中访问最新状态

Question

我正在使用 react-quill，它的要求是 modules prop 必须被缓存并且不应该改变。我正在使用 useMemo 钩子来记忆它。对象是：

const modules = useMemo(() => ({
  key: {
    value: {
      handler: handlerFunc
    }
  }), [])

它的用法如下：

<Quill
  modules={modules}
  value={value}
  onChange={onChange}
  // value and onChange are props
/>

handleFunc 在 modules 对象中，只是控制台记录 value prop。 问题是 value 不是最新的，它是第一个值。 我在 class 组件中尝试了同样的事情，我能够获得该值并且它有效非常好，但不幸的是它不适用于 useMemo。请注意，我不能只将 [value] 放在 useMemo 的第二个参数中，因为 modules 不应更改。

Class 组件实现：

class MyComponent extends React.Component {
  constructor() {
    super()
    this.handlerFunc = this.handlerFunc.bind(this)
    this.modules = this.initModules(this.handlerFunc)
  }

  initModules(handlerFunc) {
    return {
      key: {
        value: {
          handler: handlerFunc,
        },
      },
    }
  }

  handlerFunc() {
    console.log(this.props.value)
  }
}

但我不能使用 class-component 因为它是仅使用功能组件的要求。有什么办法，我可以在 useMemo 中获得最新的 value，或者任何其他解决方案？

Answer 1

为什么您不将 ref 分配给编辑器并从中获取值，而是从 value prop 中获取值？

const editor = this.reactQuillRef.getEditor();
editor.getText(); // getText, getHTML or whatever

这是link

在 useMemo 中访问最新状态

Access latest state in useMemo

javascript

reactjs

react-usememo

Class 组件实现：