Question

我正在尝试使用此library在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>
    );
  }
}

我的控制台日志显示单词和测试都是包含单词和权重数组的数组。由于这是我第一次使用React / Promises，我不确定出了什么问题。有人可以解释一下吗？

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])
      });
    });
  }

修改这样的逻辑也可以消除在promise回调范围之外定义的wordsList变量的有状态变异。

在React中渲染wordcloud

1 个答案: