MobX

Question

所以在 mobx 中，当您通过 extendObservable 将新字段添加到可观察对象时，它不会重新渲染组件，而是使用可观察映射来代替，它应该获取新更改 (keys/values) 并重新渲染组件。

加载组件时，我看到在构造函数中分配了 Name 和 Language 值。所以这按预期工作。完美！

问题是在使用 addYear 操作通过按钮分配下面的新字段 Year 之后，我能够提醒它的值，这意味着它在地图中，它应该重新渲染组件，但它没有。这是代码：

@observer
export default class Book extends Component {
    @observable book = asMap({});

    constructor(props){
      super(props);

      const map = this.book;
      map.set('book', {name: 'The Secret', language: 'English'});
    }

    @action addYear() {
      const year = {year: '2006'};

      const map = this.book;
      if (map.has('book')) {
        extendObservable(map.get('book'), toJS(year));
        alert(map.get('book').year); // Shows Year but does not rerender
      }
    }

    render() {
      const map = this.book;
      const book = map.has('book') && map.get('book');

      return (
        <View style={styles.wrapper}>
            <TouchableOpacity style={styles.button}
                              onPress={() => this.addYear()}>
                <Text style={styles.text}>Add Year!</Text>
            </TouchableOpacity>

            <Text>Name: {book.name}</Text>
            <Text>Language: {book.language}</Text>
            <Text>Year: {book.year}</Text>
        </View>
      )
    }
}

知道为什么在将 Year 添加到图书地图时不重新渲染组件吗？

Answer 1

如果你只有一张代表一本书的地图，你可以只设置年份属性 like this:

@observer
class App extends React.Component {
  @observable book = asMap({
    name: 'The Secret', 
    language: 'English'
  });
  addYear = () => {
    this.book.set('year', '2006');
  };
  render() {
     const year = this.book.get('year');
     return <div> 
       <div>Name: {this.book.get('name')}</div>
       <div>Language: {this.book.get('language')}</div>
       {year ? <div>Published Year: {year}</div> : null}
       <button onClick={this.addYear}> Add Year </button>
     </div>;
  }
}

MobX - 带有 extendObservable 的地图不重新渲染新值？

MobX - Map with extendObservable not rerending with new value?

javascript