How can I setstate before making function call in react?

Question

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

How can I add setState and then call the prop func on my onClick event?

Answer 1

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

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

Answer 2

You can use a callback in setState that will be triggered once your state is updated:

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 and {} for arrow function

   <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

Better go for another async method for a cleaner code.

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