javascript - 子组件向父组件传递数据错误

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;

一旦我按下按钮，它就会对 this.props.sendData(this.state.data1) 行进行控制台 undefined。

我也必须为其他组件实现类似的事情，但没有任何内容传递给父级。请帮忙解决这个问题。

Answer 1

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