Javascript 将数据从子组件传递到父组件错误

单击按钮，我将数据从子组件传递到父组件，并以图形的形式生成数据。但是子组件的数据在其状态更新后立即显示为未定义，因此没有数据传递给父组件

这是我的父组件：

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;

class按钮所有扩展组件{
建造师（道具）{
超级（道具）；
此.state={
子数据：“”
}
}
getData=（数据）=>{
这是我的国家({
childData：数据
})
}
render（）{
返回(
)
}
导出默认按钮；

以下是我的子组件：

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;

class按钮扩展组件{
构造函数（）{
超级（）；
此.state={
数据1:[]，
}
}
getData=async（）=>{
var res=等待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]]）；
log（数据1，“第一个数据”）；
这是我的国家({
data1:data1
}, () => {
this.props.sendData（this.state.data1）
})
}
render（）{
返回(
年
)
}
}
导出默认值按钮；

我一按下按钮，它就会为行

this.props.sendData（this.state.data1）

控制台

undefined

---

我也必须为其他组件实现类似的功能，但是没有任何东西传递给父组件。请帮助解决这个问题。

在子组件中，将道具作为参数传递到

构造函数中

和

超级

。

在子组件中，将道具作为参数传递到

构造函数中

和

超级

。问题出在你的构造函数中。如果你使用构造函数，你必须提供道具作为构造函数的参数和超级参数，如下所示

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;

class按钮扩展组件{
//这里的问题是将道具作为构造函数参数传递
建造师（道具）{
超级（道具）；
此.state={
数据1:[]，
}
}
//或删除构造函数的写入状态，如下所示
状态={
数据1:[]，
}
getData=async（）=>{
var res=等待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]]）；
log（数据1，“第一个数据”）；
这是我的国家({
data1:data1
}, () => {
this.props.sendData（this.state.data1）
})
}
render（）{
返回(
年
)
}
}
导出默认值按钮；

问题出在你的构造函数中。如果你使用构造函数，你必须提供道具作为构造函数的参数和super，如下所示

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;

class按钮扩展组件{
//这里的问题是将道具作为构造函数参数传递
建造师（道具）{
超级（道具）；
此.state={
数据1:[]，
}
}
//或删除构造函数的写入状态，如下所示
状态={
数据1:[]，
}
getData=async（）=>{
var res=等待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]]）；
log（数据1，“第一个数据”）；
这是我的国家({
data1:data1
}, () => {
this.props.sendData（this.state.data1）
})
}
render（）{
返回(
年
)
}
}
导出默认值按钮；

您没有在构造函数中绑定getData（）方法

您的构造函数应该如下所示

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

    this.state = {
        data1: [],

    }
}

子组件也是如此。子组件中的函数应该在构造函数中绑定它

---

希望这能解决您的问题。

您没有在构造函数中绑定getData（）方法

您的构造函数应该如下所示

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

    this.state = {
        data1: [],

    }
}

子组件也是如此。子组件中的函数应该在构造函数中绑定它

---

希望这能解决您的问题。

我通过了它。但父组件的道具仍然是空的。@我已经用示例数据代替API请求执行了您的代码，它工作正常。我创建了一个stackblitz检查它：-打开控制台看看。您能看看这个吗..您编辑的代码执行了pr操作性。单击一个按钮，我在同一代码中渲染了一个图形及其相关数据。但不起作用。是否可以传递多个数据流，因为我想在单击时调用多个图表？@bubble cord确保首先在stackblitz上分叉该项目，然后编辑它并提供该URL。我做了一些更改，请查看我的通过。父组件的道具仍然是空的。@我已经用示例数据代替API请求执行了您的代码，并且工作正常。我已经创建了一个stackblitz。请检查：-打开控制台并查看。您可以看看这个吗..您编辑的代码执行正确。我用单击单个按钮，其相关数据在同一代码中。但不起作用。是否可以传递多个数据流，因为我想在单击时调用多个图表？@bubble cord确保首先在stackblitz上分叉项目，然后编辑它并提供该URL。我做了一些更改。我尝试了两种方法。仍然是pa我没有收到任何道具。没有道具，我无法通过