Question

将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一起运行时，即使在我登录时传递给它的道具正确userX，孩子仍会显示userY。

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

更新

所以我尝试@computed这样：

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

但仍然是同一个问题。我似乎只能在渲染语句中直接从传递的prop中访问正确的用户，而不是让mobx分配prop值并从mobx observable / computed中读取它：

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正确返回最新传递的prop，所以第一个控制台日志工作？

Answer 1

我认为你做enemy1_atkk，你不创建对原始observable的引用，而是创建一个新的observable，其初始值与原始值相同。

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

@observable owner = this.props.user

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

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

*注意：嗯，它不是完全克隆，但对用户的更改也会反映在所有者对象中。查看the docs了解详情。

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

1 个答案: