修改state的值,this.setState

2020-06-09  本文已影响0人  ticktackkk

react中想为state修改值,this.state.xxx = xxx是无法修改的
可以通过this.setState来修改

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "haha",
      name:'hehe',
      age:22
    };
  }
  render() {
    return (
      <div>
        <button onClick={() => this.show()}>click me </button>
        <h1>{this.state.msg}</h1>
      </div>
    );
  }
  show = () => {
    console.log(this);
    this.setState({
      msg: "123",
    });
  };
}

export default App;

注意点一、
修改state,只会修改自已指定的值并不会全部覆盖其他的state状态的值
注意点二、
this.setState是异步执行的,如果想拿到最新的值可以在this.setState回调中拿到最新的值

this.setState({},callback);

this.setState({
      msg: "123",
    },function(){
console.log(this.state.msg));
上一篇下一篇

猜你喜欢

热点阅读