在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,所以我不确定发生了什么问题。有人能解释一下吗?
答
您拨打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
的状态突变。
有两个问题:返回前是'responseJson' undefined?你是否尝试没有“catch”? –
1)它是一个数组。 2)Negative @DamienLeroux – Turtle