単一のonClickイベントで状態を設定して実行する

Question

onClickイベントで状態を設定して関数を実行する必要があります。どのようにしてこれを達成するのですか？

私はこれらの2つのものをtheir own functionに入れようとしましたが、以下の警告が表示されます。

警告：setState（...）：既存の状態遷移（たとえば、renderまたは別のコンポーネントのコンストラクタ内）では更新できません。レンダリング方法は、小道具と州の純粋な機能でなければなりません。コンストラクタの副作用はアンチパターンですが、componentWillMountに移動することができます。

editLink(onEditLink, link) { 
    this.setState({showContent: false}); 
    onEditLink(link); 
} 

render() { 
    return (
    <a onClick={this.editLink(this.props.onEditLink, this.props.link)}>Edit</a> 
) 
} 

Answer 1

問題はすぐに関数を呼び出す代わりの要素がクリックされたときに実行される新しい機能を割り当てるです：

editLink(onEditLink, link) { 
    this.setState({showContent: false}); 
    onEditLink(link); 
} 

render() { 
    return (
    <a onClick={() => this.editLink(this.props.onEditLink, this.props.link)}>Edit</a> 
) 
} 

何がやりたいことは関数を渡すで、どの実行すると、これらのパラメータでthis.editLink関数が呼び出されます。

Answer 2

setStateその2番目の引数としてコールバック関数を受け入れ、私はあなたが利用示唆している：

editLink(onEditLink, link) { 
    this.setState({showContent: false},() => { 
    onEditLink(link); 
    }); 
} 

SETSTATEの2番目のパラメータ（）となりますオプションのコールバック関数 ですsetStateが一度実行され、コンポーネントが再レンダリングされた です。一般的には、代わりに のロジックの代わりにcomponentDidUpdate（）を使用することをお勧めします。