在axios的then中,this并不代表react组件,因此this.setState将执行异常:this is not defined

解决方法一 通过提前将this声明为变量

let ts = this;//在axios中setState方法一

axios.request({
            headers:{  //非必须
                "Content-Type":"application/x-www-form-urlencoded"
},
            url:Url,
            params:Params
        })
        .then(function (response) {
            let data =response.data
            console.log(data.name);

            ts.getData(data.name);
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    getData(newName){
        this.setState({
            argName: newName
        });
    }

解决方法二 通过箭头函数

axios.request({
            headers:{  //非必须
                "Content-Type":"application/x-www-form-urlencoded"
},
            url:Url,
            params:Params
        })
        .then(aaa => this.setState({ //在axios中setState方法二
              argName:aaa.data.name
          }))
          .catch(function (error) {
            console.log(error);
          });
    }
axios.request({
            headers:{  //非必须
                "Content-Type":"application/x-www-form-urlencoded"
},
            url:Url,
            params:Params
        })
        .then((response) => {

            this.setState({ //在axios中setState方法三
                      argName:response.data.name
                  })
        })
          .catch(function (error) {
            console.log(error);
          });
    }

参考:https://blog.csdn.net/hj7jay/article/details/69230036

标签智能推荐:

react对于setState的写法

react对于setState的写法,改变state的数组里边的值也可以这样写[1,2,3,4,5].forEach((item)=>{letarr={}arr[`list${item}`]=[]this.setState(arr)})

SetState

SetStatesetState跟新状态写法:react后续更新状态的动作是异步的。对象式setStateconst{num}=this.statethis.setState({num:num+1})可以多传入一个回调const{num}=this.state//异步的回调函数是在状态更新之后(render跟新之后)会进行调用的this.setState({num:num+1},()=>{}

setState何时同步,何时异步,为什么?

t库控制,此时使用setState则为异步,alert值为"异步"。如何才能触发同步呢?看如下代码:test(){this.setState({name:"同步"},function(){alert(this.state.name)})}此时使用回调的方式,即可触发同步,大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等,这些事件处理程序中的

setState机制

){this.setState({val:this.state.val+1});console.log(this.state.val);//第1次输出0this.setState({val:this.state.val+1});console.log(this.state.val);//第2次输出0setTimeout(()=>{this.setState({val:this.state.v

state的注意点

p;this.state 中的值必须通过  this.setState 函数来修改默认情况下  this.setState({count:this.state.count+1}) 是异步的, React 会收集一段时间的依赖然后一次性更新,目的是优化性能如果需要拿到更新后的值,可以在 this.se

setState(API)异步和同步的问题

/问题:setState(API)同步异步问题!!!/*通过react控制的调用是异步的。react控制:即react二次封装的事件。通过原生调用setState是同步的。同步如下:*/componentDidMount(){this.btnRef.current.addEventListener("click",()=>{console.log("原生方法执行了!!!!");this.se

react中的setState是同步还是异步?react为什么要将其设计成异步?

nt',this.state.count)this.setState({count:this.state.count+1});console.log('incrementsetState后的count',this.state.count)}//count+1三次triple=()=>{console.log('triplesetState前的count',this.state.count)t

React笔记——第一篇this.setState()

//setState写成异步的形式里面是一个函数函数的参数prestate表示的是修改数据之前的的数据this.setState((prestate)=>({//state对象赋值}),()=>{//执行完成的回调})importReact,{Component,PureComponent}from'react';exportdefaultclassHomeextendsPureCom

react进阶第三讲——state

back1',this.state.number)})console.log(this.state.number)this.setState({number:this.state.number+1},()=>{console.log('callback2',this.state.number)})console.log(this.state.number)this.setState({num

深入理解 React setState

需通过setState来告知React数据已经发生了变化;二、setState是同步还是异步的先来看React官网对于setState的说明:将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。以上说明setState本身并不是异步的,只是因为R