如何在反应中进行函数调用之前设置状态？

Question

<li
  key={suggestion.id}
  id={`suggestion-${index}`}
  className="suggestion-list-item"
  onClick={e => this.props.checkToShare(e, suggestion)}
>

如何添加setState然后在我的onClick事件上调用prop func ？

Answer 1

您可以调用 setState 并使用其回调函数：

 this.setState({...}, ()=>{ /* other function */})

Answer 2

您可以在 setState 中使用回调，一旦您的状态更新，就会触发该回调：

const handleClick = evt => {
  this.setState(..., () => {
    this.props.checkToShare(evt, suggestion)
  })
}
...

<li
  key={suggestion.id}
  id={`suggestion-${index}`}
  className="suggestion-list-item"
  onClick={handleClick}
>

Answer 3

Just 和 {} 用于箭头函数

   <li
      key={suggestion.id}
      id={`suggestion-${index}`}
      className="suggestion-list-item"
      onClick={e => {
        this.setState({ clicked: "yes" });
        this.props.checkToShare(e, suggestion);
      }}
    ></li>

Answer 4

最好使用另一种异步方法以获得更清晰的代码。

<li
  key={suggestion.id}
  id={`suggestion-${index}`}
  className="suggestion-list-item"
  onClick={e => this.cleanerWay(e,suggestion)}
>

cleanerWay=async(e,suggestion)=>{
/**setting state**/
await this.setState({suggestion});
/**calling the action**/
await this.props.checkToShare(e, suggestion);
}