反应中的渲染字云

Question

我正在尝试使用这个图书馆在React容器中创建一个wordcloud。当传递数组test时，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);
  });
}

在调试chrome中的返回值时，我看到响应值中的元素是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>
    );
  }
}

我的控制台日志显示，单词和测试都是包含单词和权重数组的数组。由于这是我第一次使用反应/承诺，我不知道哪里出了问题。谁能解释一下吗？

Answer 1

对this.setState({words: wordList});的调用在异步调用getWords之后立即发生。换句话说，wordList还没有填充setState时返回的API结果。相反，您应该只在从异步API回调之后才更新状态。

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

像这样修改您的逻辑也消除了在承诺回调范围之外定义的wordsList变量的有状态突变。