ReactJS-如何在componentDidUpdate中设置状态？

问题描述

我想做的是设置一个计时器，该计时器每3秒向页面添加一个新组件。一切正常，直到第三秒，应用程序崩溃：

错误：超出最大更新深度。当组件重复调用componentwillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量以防止无限循环。

无论如何我是否可以解决此问题，或者有人对此有更好的解决方案？这是代码：

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: 0,colors: []
        }
        this.create = this.create.bind(this);
    }

componentDidMount() {
    this.timer = setInterval(() => {
        this.setState({time: this.state.time + 1});
    },1000);
}

componentDidUpdate(prevProps,prevstate) {
    if (this.state.time % 3 === 0) {
        if (prevstate.colors !== this.state.colors) {
            this.create()
        }
        
    }
}

create() {
    let colors=['blue','green','red'];
    let randomNum = Math.floor(Math.random() * 3);
    let newColors = this.state.colors;
    newColors.push({color: colors[randomNum],num: randomNum});
    this.setState({colors: newColors});
}

render() {
    return (
        <div>
            <h1>{this.state.time}</h1>
            {this.state.colors.map(item => (
                <Random color={item.color} num={item.num} />
            ))}
            <button onClick={this.create}></button>
           
        </div>
    ) 
}
}

export default Test;

解决方法

可能在componentDidUpdate中，您应该对这些颜色使用贴图功能