[英]Passing data from child component to parent component error
单击按钮,我将数据从子组件传递到父组件,并将数据生成为图形。 但是子组件的数据在状态更新后立即显示未定义,因此没有数据传递给父组件。
这是我的父组件:
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
。
对于其他组件,我也必须实现类似的功能,但是没有任何东西可以传递给父级。 请帮忙。
在您的子组件中,在constructor
和super
传递props作为参数。
问题出在您的构造函数中。 如果使用构造函数,则必须提供道具作为构造函数和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;
您没有在构造函数中绑定getData()方法。
您的构造函数应如下所示
constructor(props) {
super(props);
this.getData = this.getData.bind(this);
this.state = {
data1: [],
}
}
您的子组件也是如此。 子组件中的函数应将此绑定到构造函数中。
希望这能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.