約束からの戻り値

Question

約束からいくつかの値を返すのが難しいです。

これは私のコードです：

getInitialState: function() { 
var me = this; 
var promise = me.getChosenProtocols(); 

return (promise.then(function(value) { 
    var ChosenProtocols = Object.keys(value).map(key => value[key]); 
    return ({ 
    showModal: (ChosenProtocols.length == 0) ? true : false, 
    SelectedProtocols: ChosenProtocols, 
    nmTitle: SE.t(218997) 
    }); 
    }, function (value) { 
    return({ 
    showModal: true, 
    SelectedProtocols: [], 
    nmTitle: SE.t(218997) 
    }); 
})); 
}, 

だから何が起こっている、getChosenProtocolsは解決の約束を返し、私はそれから値を返すようにしようとしています。
ご協力いただければ幸いです。私はそれがこのように変更する場合

おかげで誰もが、それが働いた：あなたはgetInitialStateで非同期操作を行うべきではありません

getInitialState: function() { 
    var me = this; 

    return ({ 
      showModal: false, 
      SelectedProtocols: [], 
      nmTitle: SE.t(218997) 
    }); 
}, 

componentWillMount: function() { 
    var me = this; 
    var promise = me.getChosenProtocols(); 

    promise.then(function(value) { 
     var selectedProtocols = Object.keys(value).map(key => value[key]); 

     me.setState({ 
      showModal: (selectedProtocols.length == 0) ? true : false, 
      SelectedProtocols: selectedProtocols 
     }) 
    }); 
}, 

Answer 1

はほとんどが正しい見えます。問題は、約束の値を返すところにあるように見えます。これは、約束に基づいてReactコンポーネントに初期値を設定するように見えます。その場合、約束から値を返す関数を作成し、その関数の出力と同じ変数を設定します。つまり、setInitialStateの中でこれを行うことはお勧めできません。 componentWillMountまたはcomponentDidMountがより適切です。

me.getChosenProtocalsが解決約束を返している場合、あなたはthen()に提供最初の関数は、変数valueとして渡された約束から返された値を持つことになります。これらの線に沿って

何か：あなたが約束から値を返すようにしたいん

getInitialState: function() { 
    return(
    SelectedProtocols: null 
) 
} 

componentWillMount: function() { 
    const me = this; 

    me.getChosenProtocols = new Promise((resolve, reject) => { 
    setTimeout(function(){ 
     resolve("Success!"); 
    }, 250); 
    }); 

    me.getChosenProtocols.then(function(value) { 
    var selectedProtocols = Object.keys(value).map(key => value[key]); 
    me.setState({ 
     SelectedProtocols: selectedProtocols 
    }) 
    }) 
} 

Answer 2

、することができますsetState componentWillMountまたはcomponentDidMountインチこれとは別に、ES6クラスの使用を強くお勧めします。あなたが約束についての持っているもの

getInitialState: function() { 
    return {chosenProtocols: {}}; 
}, 
componentDidMount: function() { 
    var protocolsPromise = this.getChosenProtocols(); 
    protocolsPromise.then((value) => { 
    var chosenProtocols = Object.keys(value).map(key => value[key]); 
    this.setState({chosenProtocols: chosenProtocols}); 
    }) 
} 

ES6バージョン

class ComponentName extends React.Component { 
    constructor(props) { 
    super(props); 
    this.getChosenProtocols = this.getChosenProtocols(bind); 
    this.state = {chosenProtocols: {}}; 
    } 


    componentWillUnmount() { 
    var protocolsPromise = this.getChosenProtocols(); 
    protocolsPromise.then((value) => { 
     var chosenProtocols = Object.keys(value).map(key => value[key]); 
     this.setState({chosenProtocols: chosenProtocols}); 
    }); 
    } 

    getChosenProtocols() { 
    // Returns a promise 
    } 
}