mobx 可观察日期字段不会自动重新呈现

Question

如果我没记错的话，每当日期更改时视图都应该重新呈现，但似乎有问题。我是否缺少 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 无法像那样处理 Date 中的 observables 对象。你可以例如将语言环境日期字符串存储在字符串变量中：

示例 (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>
    );
  }
}

mobx 可观察日期字段不会自动重新呈现

mobx observable date field not rerender automatically

javascript

reactjs

mobx