如何访问map内部函数内部的状态

Question

我正在尝试使.map方法的每个项目都具有onClick效果，如下所示：

this.props.products.map(function(item, i) { return ( <tr key={ i } onClick={ function() { console.log(arrayForOnClick) arrayForOnClick = [item['id'], item['name'], item['price']] this.handleTableString(item['id'], item['name'], item['price']) // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. } }> <td>{ item['id'] }</td> <td>{ item['name'] }</td> <td>{ item['price'] }</td> </tr> ) }, this)我正在尝试访问this.handleTableString

handleTableString(id, name, price) { this.setState({ editProductModal: true, selectedId: id, selectedName: name, selectedPrice: price }) console.log('triggered') }

但是我收到了Uncaught TypeError: Cannot read property 'handleTableString' of null错误Uncaught TypeError: Cannot read property 'handleTableString' of null是否还有另一种方法可以使onClick或我的代码有问题？

Answer 1

问题是， this是对每个不同的function （它不保存您的嵌套函数）。 你可以。

1. 使用变量来this进行引用。

。

this.props.products.map(function(item, i) {

  const self = this;
  return (
    <tr key={ i } onClick={ function() {
        console.log(arrayForOnClick)
        arrayForOnClick = [item['id'], item['name'], item['price']]
        self.handleTableString(item['id'], item['name'], item['price'])
        // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. 
      } }>
      <td>{ item['id'] }</td>
      <td>{ item['name'] }</td>
      <td>{ item['price'] }</td>
    </tr>
  )
}, this)

2. 使用不绑定this 箭头函数 ，以便在父上下文中查找它。

。

this.props.products.map(function(item, i) {
  return (
    <tr key={ i } onClick={ () => {
        console.log(arrayForOnClick)
        arrayForOnClick = [item['id'], item['name'], item['price']]
        this.handleTableString(item['id'], item['name'], item['price'])
        // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. 
      } }>
      <td>{ item['id'] }</td>
      <td>{ item['name'] }</td>
      <td>{ item['price'] }</td>
    </tr>
  )
}, this)

Answer 2

在没有正确绑定上下文的情况下，请勿创建匿名函数。 在这种情况下也可以使用箭头功能：

this.props.products.map(function(item, i) {
  return (
    <tr key={ i } onClick={() => {
        const arrayForOnClick = [item['id'], item['name'], item['price']]
        this.handleTableString(item['id'], item['name'], item['price'])
      } }>
      <td>{ item['id'] }</td>
      <td>{ item['name'] }</td>
      <td>{ item['price'] }</td>
    </tr>
  )
}, this)

Answer 3

问题是在您的onClick内联函数中this是null。 所以，你需要分配onClick给一个函数this已经使用javascript明确设置bind方法。

<tr key={ i } onClick={
  function() {
    console.log(arrayForOnClick)
    arrayForOnClick = [item['id'], item['name'], item['price']]
    this.handleTableString(item['id'], item['name'], item['price'])
  }.bind(this)
}>
...
</tr>

Answer 4

在JavaScript中， this内部函数可以绑定到“ 真知” ，具体取决于调用方式。 在您的代码中， this代码位于this.handleTableString(item['id'], ...没有指向该组件。

将ES6 箭头函数用作map和onClick处理程序，或使用此技巧 （如果您被迫使用ES5语法并且不想/不想使用转译器（很明显是Babel ））。