Reactのwordcloudのレンダリング

Question

このlibraryを使用してReactコンテナ内にワードクラウドを作成しようとしています。ワードクラウドは、配列testを渡すと動作します。

私はapiを呼び出してwordcloudの単語を取得し、それをwordcloudライブラリに渡したいと考えています。以下は、私は、APIからwordsの配列をフェッチし、次にwordcloudライブラリに渡すために使用しているコードです。

function getWords() { 
    return fetch('http://bio-wordcloud-dev.us-east-1.elasticbeanstalk.com/getWords/?format=json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    return responseJson; 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

クロムで戻り値をデバッグするとき、私は応答値の要素がundefinedていることがわかります。ここにコンポーネントがあります：

import WordCloud from 'wordcloud' 
class WordCloudComponent extends React.Component { 
    componentWillMount() { 
    var words = getWords(); 
    var wordList = [] 
    words.then(function(value) { 
     value.map(function(object){ 
     wordList.push ([object.word,object.weight]); 
     }); 
    }); 
    this.setState({words: wordList}); 
    } 
    componentDidMount() { 
    var canvas = ReactDOM.findDOMNode(this.refs.canvas) 
    var test = [["foo", 12], ["bar", 6]]; 
    var words = this.state.words; 
    console.log(words); 
    console.log(test) 

    WordCloud(canvas, { list: test, color: "random-dark", shape: "circle", color:"green", wait: 0, backgroundColor:"black"}); 
    } 
    render() { 
    return (

     <div className={styles.cloudCanvasContainer}> 
     <canvas ref="canvas"></canvas> 
     </div> 
    ); 
    } 
} 

私のコンソールログには、言葉とテストの両方が単語と重みの配列を含む配列であることが示されています。 React/Promisesを初めて使ったので、何がうまくいかないのか分かりません。誰か説明してもらえますか？

Answer 1

this.setState({words: wordList});への呼び出しは、の非同期にの呼び出し後に発生します。getWordsです。つまり、setStateの場合、wordListにはまだAPIの返された結果が設定されていません。代わりに、非同期APIからのコールバックの後でのみ状態を更新する必要があります。このようなあなたのロジックを変更

componentWillMount() { 
    getWords().then(function(value) { 
     this.setState({ 
     words: value.map((obj) => [obj.word, obj.weight]) 
     }); 
    }); 
    } 

はまたあなたの約束のコールバックのスコープ外で定義wordsList変数のステートフルな突然変異を排除します。