首页 > 解决方案 > 我可以创建一个在 React 渲染函数中计算的 mobx 以像 useMemo() 一样使用吗?

问题描述

我想知道如何在useMemo钩子内使用 mobx observable。我知道我可以将所有可能的依赖项传递给钩子,但这可能会有点混乱:

const MyComponent = observer(() => {
  const people = useGetPeople();
  const peopleFormatted = useMemo(() => {
    return people.map(person => person.fullName);
  },[ ...? ]);
});

我不能轻易让每个人firstName都成为useMemo. 我想我可以将功能提取到计算...但我觉得这行不通:

const MyComponent = observer(() => {
  const people = useGetPeople();
  const peopleFormatted = computed(() => {
    return people.map(person => person.fullName);
  });
});

我觉得它会混淆 mobx 在反应必须依赖的反应中创建计算。

我知道我可以将计算结果提取给每个人,但我不觉得这是一个适合每个用例的解决方案。

提前致谢!

标签: mobxmobx-react

解决方案


假设const people = useGetPeople();是某种人对象的可观察数组......

const peopleFormatted = computed(() => {
    return people.map(person => person.fullName);
  }).get(); //note .get()

应该在观察者函数体内正常工作。请参阅https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments

让我困惑的是useGetPeople();

这通常意味着您正在使用 react 的状态 api 来管理状态和反应。即:useState等。

没有看到useGetPeople()引擎盖下的内容,很难给出具体的答案。


推荐阅读