在 React 中渲染 wordcloud

Question

我正在尝试使用 library 在 React 容器中创建一个 wordcloud。 wordcloud 在传递数组 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);
  });
}

在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 之后立即发生。换句话说，当您setState 时，wordList 尚未填充 API 返回的结果。相反，您应该仅在从异步 API 回调后更新您的状态。

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

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