如何在多个状态更改中的每一个上重新渲染组件？

Question

我还在学习 JS/React，所以很可能我做的完全错了。欢迎任何批评。

我有一个画布，上面有一幅画。我想在按下按钮时多次更改绘图的颜色。要清楚：我想单击按钮多次更改绘图的颜色。

我试过用几种不同的方式来做这件事，但它们主要是两种方式的变体：

• 当按钮被按下时，它会调用多次更改状态的方法，但 React 只会费心渲染我设置的最后一个状态。（这是有道理的）

• 使用setTimeoutfor each setState，但它似乎破坏了方法，并且渲染永远不会改变。

这是一个示例代码：

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;

我做错了什么以及如何通过反应实现多种颜色变化？

Answer 1

如果没有setTimeout所有的渲染将基本上合并为一个，这就是 React 的工作方式。但是，您可以尝试setTimeout使用动态超时。class App extends React.Component {&nbsp;constructor(props) {&nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; color: "#000000",&nbsp; &nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;&nbsp; changeColors = () => {&nbsp; &nbsp; let colors = ["#000000", "#0000FF", "#FF0000", "#00FF00"];&nbsp; &nbsp; colors.forEach((color, i) => {&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ color });&nbsp; &nbsp; &nbsp; }, 500 * i);&nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App" style={{ color: this.state.color }}>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Change Colors</h1>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.changeColors}>change</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id='root'></div>