javascript - mobx 可观察日期字段不会自动重新渲染

Question

如果我没记错的话，只要日期更改， View 就应该重新渲染，但似乎有问题。我是否遗漏了 mobx 的任何基础知识？或者我的期待是错误的？它适用于商店，但不适用于此日期。

import {observer} from 'mobx-react';
import React from 'react';
import {observable,computed} from 'mobx';
import ReactDOM from 'react-dom';
import { Nav,Icon,Field,Control,Button, Hero, Container, Title, SubTitle, Tabs } from 'reactbulma'

@observer
class ExpenseListView extends React.Component {
@observable currDate = new Date();
constructor(){
    super();
}

render() {
    return (<div>
    <Hero dark>
      <Hero.Body>
        <Container hasTextCentered>
          <Title>  Expense List</Title>
            <SubTitle>
              <Button black small onClick={()=>{
                this.currDate.setDate(this.currDate.getDate() - 1);
                console.log(this.currDate);}}
                >
                {'<'}
                </Button>{this.currDate.toLocaleDateString()}
            </SubTitle>
        </Container>
      </Hero.Body>
    </Hero>
    </div>)

}
}
ReactDOM.render(<ExpenseListView />, document.getElementById('root'));

Answer 1

MobX 无法像这样处理 observables 中的 Date 对象。你可以例如将区域设置日期字符串存储在字符串变量中:

示例 ( JSBin )

@observer
class ExpenseListView extends React.Component {
  currDate = new Date();
  @observable currDateString = new Date().toLocaleDateString();

  handleClick = () => {
    this.currDate.setDate(this.currDate.getDate() - 1);
    this.currDateString = this.currDate.toLocaleDateString();
  };

  render() {
    return (
      <div>
         <button onClick={this.handleClick}> {'<'} </button>
         { this.currDateString }
      </div>
    );
  }
}