MobX React：定义一个观察者钩子

Question

我正在尝试在依赖于 mobx observables 的 MobX 项目中定义我自己的钩子。但是不可能用 observer() 包装一个钩子，因为 observer() 必须 return 一个组件。有没有办法定义观察者钩子？

示例：

// not working because observer must return a component
const useFindSuggestion = observer(({ target, node, suggestionsStore }: LinkSuggestionWrapperProps) => {
  const [suggestions, setSuggestions] = useState<IDocumentInfo[]>([]);

  useEffect(() => {
    const suggestions = suggestionsStore.getRelevantSuggestions(node, target).filter((s) => s.documentId !== node.target);
    setSuggestions(suggestions);
  }, []);

  return { suggestions };
});

Answer 1

解决方案：在钩子中使用自动运行 https://mobx.js.org/react-integration.html#useeffect

示例：https://codesandbox.io/s/minimal-mobx-react-project-forked-8gnxgt?file=/index.js

MobX React：定义一个观察者钩子

MobX React: Define a observer hook

mobx

mobx-react