如何在反應中進行函數調用之前設置狀態？

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);
}