Question

我正在尝试构建简单的应用，以学习如何进行api调用。当我尝试setState与我创建的onClick函数进行反应时，每次尝试调用都会得到

不是功能

我试图这样绑定：

this.setState(() => ({
  rowPos: null
}).bind(this))

但是那也不起作用，我得到了错误：

（中间值）.bind不是函数

有带有状态对象的构造函数：

constructor(props) {
  super(props);
  this.state = {
    endpoint: 'https://jolapatola5.fakturownia.pl/invoices.json',
    params: {
      api_token: 'B5Lg3uPBCMcDNX5lsQOM/jolapatola5',
      invoice: {
        "kind": "vat",
        "number": null,
        "sell_date": "2019-07-14",
        "place": 'Lublin',
        "sell_date": "2019-07-14",
        "issue_date": "2019-07-14",
        "payment_to": "2019-07-21",
        "buyer_name": "aaa",
        "buyer_tax_no": "5252445767",
        "buyer_street": "aaa",
        "buyer_post_code": "",
        "buyer_city": "",
        "seller_name": 'aaa',
        "seller_street": '',
        "seller_post_code": '',
        "seller_city": '',
        "seller_bank_account": '',
        "seller_tax_no": '',
        positions: [{
            "name": "Produkt A1",
            "tax": 23,
            "total_price_gross": 10.23,
            "quantity": 1
          },
          {
            "name": "Produkt A1",
            "tax": 23,
            "total_price_gross": 10.23,
            "quantity": 1
          }
        ]
      }
    }
  }
  this.removeProductRow = this.removeProductRow.bind(this);
}

和我尝试调用onClick的方法：

removeProductRow(id) {
  let rowPos = this.state.params.invoice.positions[id];

  this.setState(() => ({
    rowPos: null
  }).bind(this))

  console.log(rowPos)
};

在映射组件时会传递

id

我要执行的结果是将this.state.params.invoice.position别名rowPos设置为null，现在是object。

感谢您的帮助

编辑：这是我映射组件的方法：

{
  this.state.params.invoice.positions.map(function(item,index){
  return 
    <ItemRow key={index} removeProductRow={() => this.removeProductRow(index)}/>
  },this)
}

Answer 1

setState应该绑定到React.Component，当您调用this.setState.bind(this)时，实际上是将其绑定到removeProductRow，只需删除.bind(this)

Answer 2

我要做两件事。

首先：修复remove方法。

removeProductRow(index){
  let positionsUpdated = this.state.params.invoice.positions.filter((_, idx) => idx !== index);
  // update just the positions of the state.
  // try to create paramsUdpated yourself.
  this.setState({params: paramsUdpated});
};

第二：在渲染中，我不会将回调传递给props，而只是传递函数的名称，并使用prop itemIndex来获取ItemRow组件中positions数组的索引。

{this.state.params.invoice.positions.map(function(item,index){
  return (<ItemRow key={index} itemIndex={index} removeProductRow={this.removeProductRow}/>)}

我的想法的有效示例：https://codesandbox.io/s/priceless-sun-tb76r

为什么this.setState会变成“不是函数”？

2 个答案: