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可观察日期字段不会自动重新呈现

1 个答案: