我還在學(xué)習(xí) JS/React，所以很可能我做的完全錯(cuò)了。歡迎任何批評(píng)。我有一個(gè)畫布，上面有一幅畫。我想在按下按鈕時(shí)多次更改繪圖的顏色。要清楚：我想單擊按鈕多次更改繪圖的顏色。我試過用幾種不同的方式來做這件事，但它們主要是兩種方式的變體：當(dāng)按鈕被按下時(shí)，它會(huì)調(diào)用多次更改狀態(tài)的方法，但 React 只會(huì)費(fèi)心渲染我設(shè)置的最后一個(gè)狀態(tài)。（這是有道理的）使用setTimeoutfor each setState，但它似乎破壞了方法，并且渲染永遠(yuǎn)不會(huì)改變。這是一個(gè)示例代碼：import React from 'react';class App extends React.Component { constructor(props) {      super(props);      this.state = {        color: "#000000",      }      this.changeColors = this.changeColors.bind(this);  }    changeColors() {    let colors = ["#000000", "#0000FF", "#FF0000", "#00FF00"];    for (let nextColor in colors) {      console.log(`Color now ${colors[nextColor]}`);      // This seems to break it      //setTimeout(function(){ this.setState({color: colors[nextColor]}); }, 3000);      // This only renders last state      this.setState({color: colors[nextColor]});    }  }  render() {    return (      <div className="App">        <h1>Change Colors</h1>        <MyButton changeColor={this.changeColors}/>        <MyCanvas color={this.state}/>      </div>    );  }}class MyButton extends React.Component {  render() {    return (      <button         type="button"         className="btn btn-secondary"         onClick={() => this.props.changeColor()}>        Color      </button>    );  }}class MyCanvas extends React.Component {  componentDidMount() {      this.drawOnCanvas(this.props.color)  }    componentDidUpdate() {      this.drawOnCanvas(this.props.color)  }    drawOnCanvas(color) {    const ctx = this.refs.canvas.getContext('2d');    ctx.clearRect(0, 0, 300, 300)     ctx.fillStyle=color.color;    ctx.fillRect(10, 10, 100, 100);  }    render() {    return (      <canvas id="canvas" ref="canvas" width={300} height={300}/>    );  }}export default App;我做錯(cuò)了什么以及如何通過反應(yīng)實(shí)現(xiàn)多種顏色變化？