Question

我正在学习反应。我试图了解redux。我开发了一个简单的页面，在购物袋中添加了商品。现在，我正在尝试实施删除项。

我的目标是在REMOVE_ITEM操作中传递一个索引。我将在操作中删除带有该索引的项目。但是每当我单击“删除按钮”时，都会出现以下错误。

TypeError：无法读取未定义的属性“索引”

此错误来自以下行：

onClick = {（）=> this.props.REMOVE_ITEM（{索引： this.props.items [i] .index}）

我尝试首先使用array.map函数。但是在array.map中，this.props在变量范围之外。所以我将代码移到了单独的函数中。然后从渲染调用该函数。但是我的问题仍然没有解决。

我还尝试将this.props.REMOVE_ITEM绑定到构造函数中。但是我没有成功。

我的完整代码如下。

import React, { Component } from "react";
import { connect } from "react-redux";
class ShopingBag extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  bag_items() {
    var list = [];
    console.log(this.props);
    for (var i = 0; i < this.props.items.length; i++) {
      list.push(
        <tr>
          <td>{this.props.items[i].index}</td>
          <td>{this.props.items[i].name}</td>
          <td>{this.props.items[i].unit}</td>
          <td>
            <button
              onClick={() =>
                this.props.REMOVE_ITEM({
                  index: this.props.items[i].index
                })
              }
            >
              Remove
            </button>
          </td>
        </tr>
      );
    }

    return list;
  }
  render() {
    console.log(this.props);
    return (
      <div>
        Shoping Bag
        <div>
          <table>
            <thead>
              <tr>
                <th>id</th>
                <th>item</th>
                <th>unit</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {/* {this.props.items.map(function(item, i) {
                return (
                  <tr key={i}>
                    <td>{item.index}</td>
                    <td>{item.name}</td>
                    <td>{item.unit}</td>
                    <td>
                      <button
                        onClick={() => this.props.REMOVE_ITEM({ index: 0 })}
                      >
                        Remove
                      </button>
                    </td>
                  </tr>
                );
              })} */}
              {this.bag_items()}
              <tr>
                <td />
                <td />
                <td />
                <td>{this.props.total}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    REMOVE_ITEM: data => dispatch({ type: "REMOVE_ITEM", payload: data })
  };
};

const mapStateToProps = store => {
  return {
    items: store.sR.items,
    total: store.sR.total
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShopingBag);

在React.js的onClick内部未定义this.props

0 个答案: