シングルアクションでボタンを無効にして再度有効にする

Question

非同期呼び出し中にボタンを無効にしてから再度有効にする必要があります。私はそれを無効にすることができます。再度有効にするコードを追加すると無視されます。私は正しい質問をしていないかもしれないことを認めます。

私はボタン「アクション」との機能があります。

<button className={`doFoo${buttonClasses[type]} ${type}`} onClick={onClick} disabled={isButtonDisabled}> 

リアクトクラス「アクション」によって呼び出されます。

<Action type="like" onClick={onLike} isButtonDisabled={isButtonDisabled} /> 

別のリアクトクラス「リスト」で呼ばれています：そのクラスでも

<Actions onLike={this.handleLike} onDislike={this.handleDislike} isButtonDisabled={isButtonDisabled}/> 

で、次のような機能は以下のとおりです。

ここでは

... 
thumbsUp() { 
    const { 
     ... 
    } = this.props; 
    const { 
     ... 
    } = this.state; 

    this.setState({ wasLiked: true, viewProfile: false },() => { 
     setTimeout(doThumbsUp, ACTION_CONFIRMATION_ANIMATION_TIMEOUT); 
    }); 

    function doThumbsUp() { 
     thumbsUp({ 
     index: activeIndex, 
     id: profiles[activeIndex].id 
     }); 
    } 
    }, 

    handleLike() { 
    const { showThumbsUpConfirmation } = this.props; 

    if (showThumbsUpConfirmation) { 
     this.showThumbsUpConfirmationModal(); 
    } else { 
     this.thumbsUp(); 
    } 
    }, 
... 

ソースは次のようになります。

export function thumbsUp({ id, ... }) { 
    return api.post(`${API.ENDPOINTS.FOO}/${id}/thumbs_up`, { 
    ... 
    }); 
} 

私はこのコードでは、様々な場所でthis.setState(isButtonDisabled: true)を配置することができ、その値はビューになり、ボタンを無効にします。しかし、私は作業が完了した後にボタンを再び有効にする方法を理解することはできません。

Answer 1

正しく理解していれば、非同期中にボタンを無効にし、非同期を有効にした後でもかまいませんか？その場合、api呼び出しを行う関数を呼び出しているところでは、.then(() => this.setState(isButtonDisabled: false)をチェーンするだけで、api呼び出しから応答を受け取るとすぐに状態が更新されます。また、es6を使用していない場合は、thisをapi呼び出しの上にある変数に設定して、setStateのスコープが正しく設定されていることを確認してください。