如何解决React静态getDrivedStateFromProps在React 16.13.1中不起作用
嗨,我是reactjs的新手,我的react版本= 16.13.1。有三个文件“ Student.js”,:Marks.js,“ index.js”。我正在尝试通过以下方式更新Marks.js中的状态使用按钮的Students.js。我正在尝试通过方法“静态getDrivedStateFromProps()”来更新标记状态。但是,即使该方法中的console.log仍在工作,该方法也无法正常工作。任何帮助或建议都将得到应用。>
**Index.js**
import React from 'react';
import ReactDOM from 'react-dom';
import Student from "./Student";
ReactDOM.render(<Student roll_no="101"/>,document.getElementById("root"));
**Student.js**
import React,{ Component } from 'react'
import Marks from "./Marks";
export default class Student extends Component {
constructor(props){
super(props);
this.state={
roll_no:this.props.roll_no
}
}
handleClick=()=>{
console.log("button click");
this.setState({roll_no:(Number(this.state.roll_no)+2)});
}
render() {
return (
<div>
<h1>This rollNo is {this.state.roll_no}</h1>
<Marks roll_no={this.state.roll_no}/>
<button onClick={this.handleClick}>Click Me</button>
</div>
)
}
}
**Marks.js**
import React,{ Component } from 'react';
export default class Marks extends Component {
constructor(props){
super(props);
console.log("this is marks constructor"+this.props.roll_no);
this.state={
mroll_no:this.props.roll_no
};
}
static getDrivedStateFromProps(props,state){
console.log("this is in marks in getDrivedStateFromProps");
console.log(props.roll_no);
console.log(state.mroll_no);
if(props.roll_no!==state.mroll_no){
return {mroll_no:props.roll_no}
}
return null;
}
render() {
console.log("inside marks render");
console.log("inside marks render this.props.roll_no"+this.props.roll_no);
return (
<div>
<p> in Marks the roll_no is{this.state.mroll_no}</p>
</div>
)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。