![](/img/trans.png)
[英]ReactJS: Passing props to map from parent component props are undefined
[英]Passing two props from parent to child component leads to undefined in parent
在我的react redux项目中,我试图将props从子组件传递到父组件。 更具体地说,我想将两条信息:product和counter传递给父容器,该两条信息都打算在函数内部使用,如下所示:
addProductToBasket(product, counter) {
}
我的问题是这样的:在addProductToBasket函数中无法识别计数器,并且出现以下错误消息:
未捕获的ReferenceError:未定义计数器
为什么未在此处定义计数器,如何在此函数中正确使用它?
以下是相关的父容器代码:
class Products extends React.Component {
constructor(props) {
super(props);
this.state = {
listOn: false,
total: 0,
}
this.addProductToBasket = this.addProductToBasket.bind(this);
}
addProductToBasket(product, counter) {
var price = Number(product.price);
console.log(price);
this.setState(prevState => ({
total: prevState.total + price,
}),
() => {
var total = this.state.total
console.log(counter);
this.props.updateBasket(total, price, counter, product);
})
}
render() {
const grid = this.props.products.map((product, i) => {
return (
<GridLayout
key={i}
name={product.name}
id={product.id}
description={product.description}
price={product.price}
addProductToBasket={() => this.addProductToBasket(product, counter)}
/>
);
});
return(
<Grid>
<Row>
{grid}
</Row>
</Grid>
);
}
}
function mapStateToProps(state) {
return {
products: state.products
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ updateBasket: updateBasket }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Products);
和子组件代码:
export default class GridLayout extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
}
this.handleAdd = this.handleAdd.bind(this);
}
handleAdd(product) {
this.setState({counter: this.state.counter + 1}, () => {
var counter = this.state.counter
console.log('counter is' + counter)
this.props.addProductToBasket(product, counter);
});
}
render() {
return(
<Col xs={12} md={4}>
<div style={{padding: '10px', backgroundColor: 'white', height: '120px', width: '100%'}}>
<div>{this.props.id}</div>
<div>{this.props.name}</div>
<div>{this.props.description}</div>
<div>$ {this.props.price}</div>
<div style={{float: 'right', cursor: 'pointer'}} onClick={this.handleAdd}>
+
</div>
</div>
</Col>
);
}
}
这是因为您忘记了在箭头函数中接收从父组件内部的子对象传递的参数。
这里:
addProductToBasket={() => this.addProductToBasket(product, counter)}
用这个:
addProductToBasket={(prodt, counter) => this.addProductToBasket(prodt, counter)}
原因是:您没有将addProductToBasket
直接传递给child,而是传递了arrow函数 ,并且在arrow函数的内部调用了addProductToBasket
,因此您需要接收arrow函数中的参数并将这些参数传递给addProductToBasket。
其他可能的解决方案是:
删除箭头函数并按如下所示编写它:
addProductToBasket={ this.addProductToBasket }
替换此行:
addProductToBasket={() => this.addProductToBasket(product, counter)}
有了这个:
addProductToBasket={this.addProductToBasket.bind(this, product, counter)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.