单击按钮时,我将数据从子组件传递到父组件,并以图形形式生成数据。但是,一旦子组件的状态更新,来自子组件的数据就会显示未定义,因此没有数据传递到父组件。
这是我的父组件:
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 作为参数传递。
关于javascript - 子组件向父组件传递数据错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55916066/