开发者问题收集

我应该如何修复 TypeError “属性‘props’未定义”？

2017-07-03
153
reactjs redux react-redux

当我点击按钮 [添加到购物车] 时，我收到一个错误： 在此处输入图片描述 。 我该如何解决这个问题？
这是我的 完整代码链接 ，下面是与问题相关的摘要： 

class ProductsList extends Component {
  ....
  renderProductsList() {
    function mapProductCards(elem) {
      return (
        <Card className="m-1" style={{width: '18rem'}} key={elem.id}>
            .... 
            <CardText>isAvailable</CardText>
            <Button onClick={() => this.props.addItemToCart(elem.id)}>Add to Cart</Button>
          </CardBlock>
        </Card>
      )
    }
....
this.props.products ....
        .map(mapProductCards)
....
const mapDispatchToProps = (dispatch) => ({
....
  addItemToCart(value) {
    dispatch(addToCart(value));
  } 
....
});

export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);
....
2个回答

在 renderProductsList 函数的开头，将 this 变量分配给本地变量。如下所示： 

renderProductsList() {
  var that = this;
  function mapProductCards(elem) {
    return (

然后在需要的地方使用 that 。例如，您的按钮现在将是： 

<Button onClick={() => that.props.addItemToCart(elem.id)}>Add to Cart</Button>

或者，改用箭头函数。如下所示： 

renderProductsList() {
  mapProductCards = (elem) => {
    return (

这将保留 this 对您实际需要的对象的引用。

编辑

查看完整代码后，根据您使用 mapProductCards 函数的方式，您需要传入正确的对象作为 this 。您可以将该对象作为第二个参数传递给 map 。像这样： 

this.props.products.map(mapProductCards, this);

您可能会发现 map() 在 MDN 上的文档很有趣： 

var new_array = arr.map(function callback(currentValue, index, array) {
    // Return element for new_array
}[, thisArg])

thisArg: Optional. Value to use as this when executing callback.

Chris
2017-07-03

我也遇到过这个问题，问题是当我调试代码时，本地 this 即函数的 this 对象给出了未定义的对象。您需要实例化函数 addItemToCart 的这个对象，因为当您单击按钮时，它会在控制台上显示一个错误，提示

您的方法 addItemToCart 未定义 为了解决这个问题，您需要将本地 this 定义为 

      renderProductsList() {
      var localThis= this;
}

然后以 

onClick={() => localThis.props.addItemToCart(elem.id)}

如果您在循环中使用函数，比如 map，那么您需要执行 

this.state.map(function(){


},**this**)

以保留此

Vikram Saini
2017-07-03