在React中渲染wordcloud

我正尝试在使用此library的React容器内创建一个wordcloud。 wordcloud在通过数组test时有效。在React中渲染wordcloud

我想调用一个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，所以我不确定发生了什么问题。有人能解释一下吗？

来源

2016-11-08 Turtle

有两个问题：返回前是'responseJson' undefined？你是否尝试没有“catch”？ –

1）它是一个数组。 2）Negative @DamienLeroux – Turtle

您拨打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的状态突变。

来源

2016-11-08 15:13:46 LINKIWI

尝试新方法时出现以下错误：'Uncaught（in promise）TypeError：无法读取null（...）的属性'words'**** *** ***未捕获）TypeError：无法读取未定义的属性'setState'（...）' – Turtle

错误来自函数getWords。 responseJson没有被返回 – Turtle

啊，我的坏 - 你需要绑定你的顶级回调：function（value）{...} .bind（this）。或者使用ES6箭头函数：（value）=> {}。您的外部'this'的范围在回调中丢失。 – LINKIWI

在React中渲染wordcloud

回答

相关问题