我可以创建一个在 React 渲染函数内计算的 mobx 以像 useMemo() 一样使用吗？

Question

我想知道如何在 useMemo 挂钩中使用可观察到的 mobx。我知道我可以将所有可能的依赖项传递给挂钩，但这可能会有点混乱：

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。

我知道我可以为每个人提取计算结果，但我不认为这是适合每个用例的解决方案。

提前致谢！

Answer 1

假设 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() 的幕后工作，很难给出具体的答案。

我可以创建一个在 React 渲染函数内计算的 mobx 以像 useMemo() 一样使用吗？

Can I create a mobx computed inside a React render function to use like useMemo()?

mobx

mobx-react