MobX - 可观察到的不更新传递的道具？答案

【问题标题】：MobX - observable not updating passed props?MobX - 可观察到的不更新传递的道具？
【发布时间】：2017-08-09 14:00:53
【问题描述】：

当使用 MobX 和 React 时，我有 2 个组件。我从父组件向子组件发送一个道具，如下所示：

import { computed } from 'mobx'
import { observer } from 'mobx-react'

@observer
class Parent extends React.Component {
  @computed get user() {
    const { gamer } = this.props;
  }

  render () {
    return <div><Child user={this.user} /></div>
  }
}

子组件：

import { observable } from 'mobx'
import { observer } from 'mobx-react'

@observer
class Child extends React.Component {
  @observable owner = this.props.user;

  render () {
    return <div>{this.owner.name}</div>
  }
}

我第一次在 userX 传递的情况下运行它时，孩子显示正确的 userX 所有者名称，通过 @observable owner 访问。问题是我第二次使用传递给userY 的不同用户运行此程序，即使在我登录时传递给它的道具是正确的userY，孩子仍然显示userX。

因此，每个用户传递的道具是不同的（应该如此），但可观察对象在传递的第一个用户上保持“锁定”。知道为什么 observable 没有将其值更新为传递的 this.props.user 吗？

更新：

所以我像这样尝试@computed：

@computed get owner() {
  return this.props.user;
}

但仍然是同样的问题。我似乎可以访问正确用户的唯一方法，仅在渲染语句中并直接从传递的道具中，而不是让 mobx 分配道具值并从 mobx 可观察/计算中读取它：

render() {
  console.log(this.owner.name); // shows old data (even w/ observable or computed returning the passed prop)
  console.log(this.props.user.name); // shows new data correctly without mobx

我只是不明白为什么 @observable 或 @computed 不返回正确的新数据。无论如何让 mobx 正确返回最新传递的道具，以便第一个控制台日志有效？

【问题讨论】：

你使用的是哪个版本的 mobx-react？
@mweststrate 使用“mobx”：“^3.2.2”、“mobx-react”：“^4.2.1”
@mweststrate 有什么想法吗？

标签： mobx mobx-react

【解决方案1】：

我认为我们你这样做@observable owner = this.props.user，你没有创建对原始 observable 的引用，而是创建了一个新的 observable，其初始值将与原始 observable 相同。

解决方案（您似乎已经找到了）是直接在子组件中使用 prop 值：

@observer
class Child extends React.Component {
    render () {
      return <div>{this.props.user.name}</div>
    }
}

如果您不想这样做，也许您可以看看使用 mobx-utils 包中的 createViewModel 克隆* observable：

import { computed } from 'mobx'
import { observer } from 'mobx-react'
import { createViewModel } from 'mobx-utils'

@observer
class Child extends React.Component {
    owner = createViewModel(this.props.user);

    render () {
      return <div>{this.owner.name}</div>
    }
}

* 注意：这不是完全克隆，但对用户的更改也会反映在所有者对象中。更多信息请查看the docs。

【讨论】：