Блог

Привет, я новичок в reactjs, моя версия react = 16.13.1. Есть три файла «Student.js «,:Marks.js «,»index.js «. Я пытаюсь обновить состояние в Marks.js через Students.js с помощью кнопки. Я пытаюсь обновить состояние меток с помощью метода «static getDrivedStateFromProps()».Но этот метод не работает даже на консоли.войдите в систему, этот метод работает.Любая помощь или предложение будут оценены.

 **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>
        )
    }
}