Javascript 警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着

我正在Udemy Advanced Webdeveloper训练营中进行一项练习。这个练习要求拿出一页32个盒子，随机改变颜色（每x秒一次）。我的解决方案并非如此。我同时改变所有32个盒子的颜色。它几乎起作用了。我最初随机得到32个框，但以后不会改变颜色。我的控制台告诉我设置状态有问题。但我不知道是什么。我认为我的changeColor是一个纯粹的函数：

import React, { Component } from 'react';
import './App.css';

class Box extends Component {
    render() {

        var divStyle = {
            backgroundColor: this.props.color
        }

        return(
            <div className="box" style={divStyle}></div>
        );
    }
}

class BoxRow extends Component {
    render() {
        const numOfBoxesInRow = 8;
        const boxes = [];

        for(var i=0; i < numOfBoxesInRow; i++) {
            boxes.push(<Box color={this.props.colors[i]} key={i+1}/>);
        }

        return(
            <div className="boxesWrapper">
            {boxes}
            </div>
            );
    }
}

class BoxTable extends Component {

    constructor(props) {
        super(props);
        this.getRandom = this.getRandom.bind(this);
        this.changeColors = this.changeColors.bind(this);
        this.state = {
            randomColors: this.getRandom(this.props.allColors, 32) // hardcoding
        };

        this.changeColors();
    }

    changeColors() {
        setInterval(
            this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
    }

    getRandom(arr, n) {
        var result = new Array(n),
            len = arr.length,
            taken = new Array(len);
        if (n > len)
            throw new RangeError("getRandom: more elements taken than available");
        while (n--) {
            var x = Math.floor(Math.random() * len);
            result[n] = arr[x in taken ? taken[x] : x];
            taken[x] = --len in taken ? taken[len] : len;
        }
        return result;
    }

    render () {
        const numOfRows = 4;
        const rows = [];

        for(let i=0; i < numOfRows; i++) {
          rows.push(
              <BoxRow colors={this.state.randomColors.slice(8*i,8*(1+i))} key={i+1}/>
            )
        }

        return (
          <div className="rowsWrapper">
          {rows}
          </div>
        );
    }
}

BoxTable.defaultProps = {
    allColors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige",
    "Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood",
    "CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk",
    "Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey",
    "DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange",
    "DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue",
    "DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink",
    "DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite",
    "ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray",
    "Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo",
    "Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon",
    "LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray",
    "LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen",
    "LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue",
    "LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon",
    "MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple",
    "MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise",
    "MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin",
    "NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed",
    "Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed",
    "PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple",
    "Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown",
    "SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray",
    "SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle",
    "Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]
}

export default BoxTable

import React，{Component}来自'React'；
导入“/App.css”；
类框扩展组件{
render（）{
变量divStyle={
背景颜色：this.props.color
}
返回(
);
}
}
类BoxRow扩展组件{
render（）{
常量numOfBoxesInRow=8；
常量框=[]；
对于（var i=0；ilen）
抛出新的RangeError（“getRandom:获取的元素多于可用元素”）；
而（n--）{
var x=Math.floor（Math.random（）*len）；
结果[n]=arr[x in take？take[x]：x]；
取下[x]=--len in取下？取下[len]：len；
}
返回结果；
}
渲染（）{
常量numorrows=4；
常量行=[]；
for（设i=0；i

您需要使用lambda函数才能在setInterval内使用setState

setInterval(() => {
        this.setState({randomColors: this.getRandom(this.props.allColors, 
                       32)});
                  }, 5000)

---

要在setInterval内使用setState，需要使用lambda函数

setInterval(() => {
        this.setState({randomColors: this.getRandom(this.props.allColors, 
                       32)});
                  }, 5000)

---

尝试将ChangeColor函数更改为如下所示：

changeColors() {
        setInterval(() => this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
    }

---

setInterval的第一个参数是function，在您的原始代码中，您已经执行了此setState，但没有传递函数本身

changeColors() {
        setInterval(() => this.setState({randomColors: this.getRandom(this.props.allColors, 32)}), 5000);
    }

---

setInterval的第一个参数是function，在您的原始代码中，您已经执行了这个setState，并且没有传递函数本身

您需要在组件创建阶段之后更新状态，在

class-BoxTable扩展组件{
建造师（道具）{
超级（道具）；
this.getRandom=this.getRandom.bind（this）；
this.changeColors=this.changeColors.bind（this）；
此.state={
随机颜色：this.getRandom（this.props.allColors，32）//硬编码
};
//删除这一行
//这是一个；
}
//将ChangeColor替换为componentDidMount，
//react将自动调用此函数
componentDidMount（）{
设定间隔(
this.setState（{randomColors:this.getRandom（this.props.allColors，32）}），5000；
}
getRandom（arr，n）{
var结果=新数组（n），
len=arr.长度，
take=新阵列（len）；
如果（n>len）
抛出新的RangeError（“getRandom:获取的元素多于可用元素”）；
而（n--）{
var x=Math.floor（Math.random（）*len）；
结果[n]=arr[x in take？take[x]：x]；
取下[x]=--len in取下？取下[len]：len；
}
返回结果；
}