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

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

Answer 2

问题出在您的构造函数中。如果使用构造函数，则必须向构造函数提供道具作为param，如下所示。

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

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

您的构造函数应该看起来像这样

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

    this.state = {
        data1: [],

    }
}

子组件也是如此。您在子组件中的函数应将此绑定到构造函数中。

希望这可以解决您的问题。

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

3 个答案: