Javascript React.js随机名称生成器在滚动的数组中进行奇怪的循环

我有一个随机名称生成器，它应该从数组中提取一个名称（或对象），并在dom加载时发布它。但当我滚动它在整个数组中循环时发现它是工作的，这是不应该的

因此，错误是加载dom，从数组中提取一个名称（或对象）并显示。但是，当您滚动时，它会不断地提取其他名称并将其写入dom中

这是让我感到悲伤的密码：

阵列

const names = [
  'Yoda',
  'Jack Sparrow',
  'Captain Kirk',
  'Spock',
  'Optimus Prime',
  'Gandalf',
  'Inigo Montoya',
  'Magneto',
  'Tony Stark',
  'Bilbo Baggins',
  'Legolas',
  'Inspector Clouseau',
  'Obi Wan'
];

发电机

class Container extends Component {
  constructor() {
    super();
    this.state = {};
    this.getRandomName = this.getRandomName.bind(this);
  }
  getRandomName() {
    return names[Math.floor(Math.random() * names.length)];
  }

它在DOM中写入的位置

<Author>
 {this.getRandomName()}
</Author>

{this.getRandomName（）}

错误

class Container extends Component {
  constructor() {
    super();
    this.state = {};
    this.getRandomName = this.getRandomName.bind(this);
  }
  getRandomName() {
    return names[Math.floor(Math.random() * names.length)];
  }

---

当我滚动时，

{this.getRandomName（）}

从数组中获取一个新名称并将其写入dom。不确定原因。

应将名称保存在状态中，否则将在每次渲染时生成新名称：

class Container extends Component {
  constructor() {
    super();
    this.state = {
      name: this.getRandomName()
    };
  }
  getRandomName() {
    return names[Math.floor(Math.random() * names.length)];
  }

-

{this.state.name}

每次组件重新呈现时，它都调用

this.getRandomName（）

。那么我应该使用componentwillmount吗？（有点新的反应，所以有时我还是会迷路……事实上我一直迷路：）生成随机名称的实际用途是什么？通常，您希望根据一些输入数据确定渲染输出，或者它至少是

状态的一部分。