文章页正文上
本文小编为大家详细介绍“react怎么更新state”,内容详细,步骤清晰,细节处理妥当,希望这篇“react怎么更新state”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 react更新state方法有:1、通过key变化子组件,代码如“
classChildrenextendsComponent{ constructor(props){ super(props); this.state={ a:this.props.a, b:this.props.b, treeData:'', targets:'', } } componentDidMount(){ const{a,b}=this.state constdata={a,b} fetch('/Url',{ data }).then(res=>{ if(res.code===0){ this.setState({ treeData:res.a, targets:res.b, }) }els免费云主机、域名e{ message.error(res.errmsg) } }) } test(item1,item2){ constdata={item1,item2} fetch('/Url',{data}).then(res=>{ if(res.code===0){ this.setState({ treeData:res.a, targets:res.b, }) }else{ message.error(res.errmsg) } }) } } exportdefaultChildren
方法一:巧用key
//父组件调用子组件
这种方法是通过key变化子组件会重新实例化 (react的key变化会销毁组件在重新实例化组件)方法二:利用ref父组件调用子组件函数(不符合react设计规范,但可以算一个逃生出口嘻嘻~)
classfatherextendsComponent{ constructer(props){ super(props); this.state={ a:'1', b:'2', } this.myRef this.test=this.test.bind(this) } change(){ const{a,b}=this.state console.log(this.myRef.test(a,b))//直接调用实例化后的Children组件对象里函数 } render(){{this.myRef=inst}}ref={(inst)=>{this.myRef=inst}}/> } }
注:wrappedComponentRef是react-router v4中用来解决高阶组件无法正确获取到ref( 非高阶组件要去掉哦)方法三:父级给子级传数据,子级只负责渲染(最符合react设计观念)推荐!!父组件:
classfatherextendsComponent{ constructer(props){ super(props); this.state={ a:'1', b:'2', data:'', } } getcomposedata(){ const{a,b}=this.state constdata={a,b} fetch('/Url',{data}).then(res=>{ if(res.code===0){ this.setState({ data:res.data }) }else{ message.error(res.errmsg) } }) } render(){} }
子组件:
componentWillReceiveProps(nextProps){ const{data}=this.state constnewdata=nextProps.data.toString() if(data.toString()!==newdata){ this.setState({ data:nextProps.data, }) } }
注:react的componentWillReceiveProps周期是存在期用改变的props来判断更新自身state读到这里,这篇“react怎么更新state”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注云技术行业资讯频道。
本篇内容介绍了“CSS中div不占位的原因及解决方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 一、CSS盒模型在谈及div元素的占位问题之前,我们需…
文章页内容下