Passing data from child component to parent component error

Question

I am passing my data from the child component to parent component on the click of the button and generating the data as graph. But the data from the child component shows undefined as soon as it's state is updated hence no data gets pass to the parent component.

Here is my Parent Component:

class ButtonAll extends Component{

    constructor(props){
        super(props);
        this.state = {
            childData: ''
        }
    }

    getData = (data) => {
        this.setState({
            childData: data
        })
    }

    render(){
        return(
            <div style={{ display: 'flex', flexDirection: 'row'}}>
                <div>
                    <YearButton sendData={this.getData} />
                </div>
             </div>
           )
}
export default ButtonAll;

Here is my Child Component:

class YearButton extends Component{

    constructor(){
        super();
        this.state = {
            data1: [],

        }
    }

    getData = async () => {
        var res = await axios.get('http://132.148.144.133:5000/api/v1/resources/tweet/count/xxhkfh2873jiqlp');
        var data1 = JSON.parse(res.data);
        data1 = data1.map(el => [el[0]*1000, el[1]]); 
        console.log(data1, 'first data');

        this.setState({
            data1: data1
        }, () => {
            this.props.sendData(this.state.data1)
        })
}

    render(){

        return(
            <div>
                <button className="year" onClick={this.getData}>year</button>            
            </div>
        )
    }
}


export default YearButton;

As soon as I hit the button, it consoles undefined for the line this.props.sendData(this.state.data1) .

I have to achieve similar thing for other components too but nothing is getting passed to the parent. Please help the issue.

Answer 1

在您的子组件中，在constructor和super传递props作为参数。

Answer 2

The problem is in your constructor. if you use constructor you must provide props as param to constructor and super like below.

class YearButton extends Component{


    //the problem is here pass props as constructor param 
    constructor(props){
        super(props);
        this.state = {
            data1: [],

        }
    }

   // or remove constructor write state like below 
   state = {
     data1 : [],
    }

    getData = async () => {
        var res = await axios.get('http://132.148.144.133:5000/api/v1/resources/tweet/count/xxhkfh2873jiqlp');
        var data1 = JSON.parse(res.data);
        data1 = data1.map(el => [el[0]*1000, el[1]]); 
        console.log(data1, 'first data');

        this.setState({
            data1: data1
        }, () => {
            this.props.sendData(this.state.data1)
        })
}

    render(){

        return(
            <div>
                <button className="year" onClick={this.getData}>year</button>            
            </div>
        )
    }
}


export default YearButton;

Answer 3

You are not binding your getData() method in the constructor.

Your constructor function should look like this

constructor(props) {
    super(props);
    this.getData = this.getData.bind(this);

    this.state = {
        data1: [],

    }
}

Same is the case with your child component. Your function in the child component should bind this in the constructor.

Hope this solves your problem.