_this2.state.get is not a function

来源:13-3 immutablejs存在的意义和使用

Emily3310367

2018-05-06

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('构造函数只执行一次');
    this.handleNum = this.handleNum.bind(this);
    this.handleTitle = this.handleTitle.bind(this);
    this.state = Map({
          num: 1,
          title: 'Demo'
        });
  }
  handleNum() {
    console.log('get', this.state.get('num'));
    // 在这个地方get是没有问题的
    this.setState(this.state.set('num', 2), () => {
      console.log('test', this.state);
    });
  }
  handleTitle() {
    if (this.state.num % 2 === 0) {
      this.setState(this.state.set('title', '偶数'));
    } else {
      this.setState(this.state.set('title', '奇数'));
    }
  }
  render() {
    return (
      <div>
        <p>推荐写法,性能较优</p>
        <button onClick={this.handleNum}>修改数字</button>
        <button onClick={this.handleTitle}>修改标题</button>
      </div>
    );
  }
}

上面这段代码执行是没有问题的,但是将get的使用放到JSX里面就会报错_this2.state.get is not a function

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('构造函数只执行一次');
    this.handleNum = this.handleNum.bind(this);
    this.handleTitle = this.handleTitle.bind(this);
    this.state = Map({
          num: 1,
          title: 'Demo'
        });
  }
  handleNum() {
    console.log('get', this.state.get('num'));
    this.setState(this.state.set('num', 2), () => {
      console.log('test', this.state);
    });
  }
  handleTitle() {
    if (this.state.num % 2 === 0) {
      this.setState(this.state.set('title', '偶数'));
    } else {
      this.setState(this.state.set('title', '奇数'));
    }
  }
  render() {
    return (
      <div>
        <p>推荐写法,性能较优</p>
        {this.state.get('num')}// 这里会报错
        <button onClick={this.handleNum}>修改数字</button>
        <button onClick={this.handleTitle}>修改标题</button>
      </div>
    );
  }
}

不知道是什么原因呢,而且放到setState里面去get也是不行的

写回答

1回答

慕瓜8449030

2018-05-16

这里应该是 setState会把你的map变成一个对象{} 所以get就不存在了,建议state还是一个{} 里面一个值是map

0
0

Redux+React Router+Node.js全栈开发

全网唯一的React 16+Redux+React Router4实战课程,学到手是你的真本领!

1822 学习 · 750 问题

查看课程