Передача данных из дочернего компонента в ошибку родительского компонента

Question

Я передаю свои данные из дочернего компонента в родительский компонент нажатием кнопки и генерирую данные в виде графика.Но данные из дочернего компонента отображаются неопределенными, как только его состояние обновляется, поэтому никакие данные не передаются в родительский компонент.

Вот мой родительский компонент:

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;

Вот мой дочерний компонент:

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;

Как только я нажимаю кнопку, он утешает undefined длястрока this.props.sendData(this.state.data1).

Я должен добиться аналогичной вещи и для других компонентов, но ничего не передается родителю.Пожалуйста, помогите с проблемой.

Answer 1

Проблема в вашем конструкторе. если вы используете конструктор, вы должны предоставить реквизиты в качестве параметра для конструктора и супер, как показано ниже.

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 2

в вашем дочернем компоненте передают реквизиты внутри constructor и super в качестве аргумента.

Answer 3

Вы не привязываете свой метод getData () в конструкторе.

Ваша функция конструктора должна выглядеть следующим образом

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

    this.state = {
        data1: [],

    }
}

То же самое относится и к вашему дочернему компоненту. Ваша функция в дочернем компоненте должна связать это в конструкторе.

Надеюсь, это решит вашу проблему.