如何使用mobx-react-lite使子组件对mobx的状态变化起反应

Question

我正在使用mobx-state-tree和mobx-react-lite，有人可以引导我找到更好的模式，

wishlist.js-愿望清单商店

import { types } from 'mobx-state-tree'

export const WishListItem = types.model('WishListItem', {
  name: types.string,
  price: types.number,
  image: "",
}).actions(self => ({
  changeName(newName) {
    self.name = newName
  },
}))

export const WishList = types.model('WishList', {
  items: types.optional(types.array(WishListItem), []),
})

root.js-根存储

export const RootStore = types.model('RootStore', {
  counter: types.optional(Counter, { count: 0 }),
  wishList: types.optional(WishList, {
    items: [{ image: '', price: 10, name: 'Yoda' }]
  }),
})

我将商店更新为

setInterval(() => store.wishList.items[0].changePrice(Math.random() * 100), 500)

在我的收藏夹视图中wishlist.jsx

const WishListItem = ({ image, name, price }) => {
  return useObserver(
    () =>
      <div>
        <img src={image} />
        <h3>{name}</h3>
        <h5>{price}</h5>
      </div>
  )
}

const WishListView = ({ items }) => {
  return useObserver(
    () => <>
      {
        items.map(
          (item, key) => <WishListItem {...item} key={key} />
        )
      }
    </>
  )
}

export default () => useObserver(() => (
  <WishListView items={store.wishList.items} />
))

这里我必须在组件树的每个级别上使用useObserver或Observer，以使其具有反应性，是否有任何方法可以将反应性引用传递给子级？

它对于像字符串或数字之类的原始类型都可以很好地工作，但是对于数组或对象，我必须直接在父级上像store.wishList[0].price那样引用变量，或者在整个树中使用useObserver。

我想将items数组传递给子项，并在子项上更新子项，就在根目录上进行此操作>

export default () => useObserver(() => (
  <WishListView items={store.wishList.items} />
))
并且不再是useObserver的孩子

更新

我发现一种解决方法是对数组进行解构，因为我们直接访问正在更改的变量，所以更改是反应性的。

export default () => useObserver(() => {
  const items = store.wishList.items.map(item => ({ ...item }))
  return <WishListView items={items} />
})
    

[我正在使用mobx-state-tree和mobx-react-lite，有人可以引导我找到更好的模式吗，wishlist.js-wishlist存储从'mobx-state-tree'导入const {WishListItem =类型.model（...

Answer 1

并且不再是useObserver的孩子