如何将“this”与 setState 回调绑定答案

【问题标题】：How to Bind "this" with setState callback如何将“this”与 setState 回调绑定
【发布时间】：2020-01-26 17:52:54
【问题描述】：

如何将“this”与 setState 回调绑定。 react 允许吗？

this.state = {
    selectedId: null,
}

//On click of some list item as

<ListGroup.Item 
  action href="" 
  key={id}
  onClick={()=>
    this.setState({selectedId: id.ID}), () => console.log(this.state.selectedID)
  }
>
  LIST ITEM
</ListGroup.Item>)

【问题讨论】：

我看不出你的代码有什么问题，你能详细说明你的问题是什么吗？
什么不起作用？
你必须提供一个更完整的例子并解释什么是行不通的。
@ShmiliBreuer 我想将此与 seState 回调绑定。目前，console.log 给我这个错误“Uncaught TypeError: Cannot read property 'state' of undefined”，这很可能是指谈论绑定 this
请看我的回答。

标签： reactjs

【解决方案1】：

您需要绑定onClick 而不是setState，这样当绑定onClick 调用setState 时，它可以“提供”这个以进行调用。在 React 类组件中，onClick 等处理程序绑定在构造函数中：

class BindingExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedId: null }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState( prevState => (...prevState, { selectedId: id.ID }),
                   () => console.log(this.state.selectedID)
                 );
  }

  render() {
    return (
      <>
        <button onClick={this.handleClick}>
         Click me
        </button>
      </>
    );
  }
}

如果onClick 被实现为粗箭头函数

handleClick = () => {
   this.setState( prevState => (...prevState, { selectedId: id.ID }),
                   () => console.log(this.state.selectedID)
                );
}

那么就不需要绑定它了，因为胖箭头函数总是会捕捉到它。作为旁注，类组件目前在 React 中已经过时了。

【讨论】：

为什么粗箭头总是捕捉到这个？
@AfrazAhmad 胖箭头总是按设计捕获this。换句话说，它是 ES6 的一个特性。
不，这是因为胖箭头函数在编译期间被移动到构造函数中。就像您在构造函数中定义了一个函数，该函数在其父范围内具有“this”。
@AfrazAhmad “不，这是因为在编译期间 fat 被移动到构造函数中” Fat 箭头函数捕获 this，即使周围没有类也没有构造函数。在这种情况下，this 是从执行上下文中捕获的。这是设计使然，这是一个基本特征。编译时发生的事情是编译器作者为实现设计要求而选择的技术。
@AfrazAhmad：你混淆了两个不同的东西：公共类字段（在构造函数中将属性分配给this 的语法糖）和箭头函数。公共类字段通常与箭头函数一起使用，以达到您提到的效果，但这只是因为箭头函数以这种方式解析this，而不是相反。

【解决方案2】：

您在这里以错误的方式实现了callback 或setState，

onClick={()=>
  this.setState({selectedId: id.ID}), () => console.log(this.state.selectedID)
}

你的 setState 到这里就结束了，

this.setState({selectedId: id.ID})   //This is complete setState

如果要将callback添加到setState，则需要将其写在setState中，

onClick={()=>
  this.setState({
     selectedId: id.ID
  }, () => console.log(this.state.selectedId)   //This is callback
  ) //end of setState
} //end of onClick

注意：您正在打印this.state.selectedID，但声明您拥有selectedId。

Demo

【讨论】：

尝试并出错：未捕获的类型错误：无法读取未定义的属性“setState”
@Meana，能否贴出完整的组件代码，或者能否提供codepen/codesandbox？
@Meana，查看演示链接。

【解决方案3】：

运行内联回调箭头函数时，无需绑定this。

您的代码的问题是您有 2 个函数

onClick={()=> this.setState({selectedId: id.ID})
//// this line is wrong
, () =>
////
console.log(this.state.selectedID)}

将您的 onClick 代码更改为：

onClick={()=> {
        this.setState({selectedId: id.ID}); 
        console.log(this.state.selectedID)
    }
}

这似乎也是错误的。

this.state = {
    selectedId: null,
}

改成这样：

state = {
    selectedId: null,
}

希望这会有所帮助。

【讨论】：

不，它不起作用。错误：“ Uncaught TypeError: Cannot read property 'setState' of undefined” 我认为我的代码可以很好地用于 setState 回调..只需将“this”与它绑定
是否有错误发生位置的行号？如果是，那一行是什么？
与console.log一起使用，因为“this”返回未定义，无法读取状态值。
请看我更新的答案，还有你的组件是类组件还是功能组件？
@ShmiliBreuer 功能组件中没有this，没有setState，也没有this.setState