React JS 改变球形词云中的词

Question

https://codesandbox.io/s/basic-demo-forked-yup2o?file=/src/App.js

我有上面的由随机词组成的球形词云沙箱 - 我正在尝试修改代码，而不是随机词，云可以显示我选择的列表中的词，例如

let MyList = ['React', 'Node', 'SQL', 'NoSQL', 'TDD', 'JavaScript', 'Python', 'Git', 'Excel', 'ReactNative', 'HTML', 'CSS', 'TypeScript', 'Java', 'Angular', 'Django']

我尝试通过将 randomWord() 更改为下面定义的 wordFromMyList() 来编辑云函数的 for 循环内的代码。

function wordFromMyList() { 
    let y = MyList[0];
    MyList.shift();
    return y 
}

但是这不起作用并且根本 return 不是球形云 - 但如果我改为将 wordFromMyList() 函数更改为 return 'hi'我得到一个只有 'hi' 这个词的球形词云，这让我很困惑为什么 shift 函数似乎不起作用。

有什么建议吗？

Answer 1

这是由于重新渲染太多（准确地说是 4 次），到那时你的 MyList 已经移动了 16 次以上并且是空的。所以你的函数 wordFromMyList 总是在第 4 次渲染时返回 undefined 并且没有显示任何内容。

在两个循环中使用 i 和 j 变量，像这样从列表中获取单词

  function wordFromMyList(i, j) {
    return MyList[i * 4 + j];
  }

React JS 改变球形词云中的词

React JS changing words in spherical word cloud

javascript

three.js

word-cloud

reactjs