为什么会一直运行这个函数？

Question

组件中是这样的：

<Tag color={this.getTagColor()}>{item.roleName}</Tag>

函数是这样的：

getTagColor = () => {
        const colors = ['magenta', 'volcano', 'gold', 'green', 'blue', 'cyan'];
        const index = Math.floor(colors.length * Math.random());
        return colors[index];
    }

运行以后color的值会不停地变化 像是一值在运行这个函数

我希望的是运行一次就行了

如何解决呢？

Answer 1

你应该把这个方法的执行放在组件render之前，也就是componentWillMount里面，然后用state存起来

state = {
  tagColor: ""
};

componentWillMount(){
  setState({
      tagColor: this.getTagColor()
  })
}

render(){
  return <Tag color={tagColor}></Tag>
}

你这里一直执行是因为，在render的时候调用了getTagColor方法，然后改变了color，react检测到值改变了又会继续render，然后就无限循环了，像这种固定的值在组件渲染之间就可以先请求然后存起来用的

Answer 2

render(){
  const tagColor=this.getTagColor();
  return <Tag color={tagColor}></Tag>
}