javascript - React 同步渲染

Question

我需要做的是在不同的时间依次渲染我的 4 个(!)保险杠中的每一个。我正在尝试通过方法 (!)simClicks() 传递数组，该方法在 for 循环内更新 setState(“我知道，这是令人作呕的代码。不知道如何异步批处理 udpate 子组件”)。显然 React 不会这样做。每当我将数组传递给 (!)simClicks(lightOrder) 时，所有子元素都会同时亮起。我希望它们在延迟一段时间后按顺序点亮。

class Board extends React.Component{
  constructor(props){
    super(props)
    this.state ={
      on: false,
      count: 0,
      computer: [],
      history: [],
      3:"0",
      2:"0",
      1:"0",
      0:"0"
    }
  } 

  SimClicks(lightOrder){
    console.log(lightOrder)
    for(i=0; i<lightOrder.length; i++){
        let newString = this.state[lightOrder[i]] + i.toString()
        this.setState({[lightOrder[i]]: newString})   
    }
  }

  Start(){
    //if(this.state.on === false){
      let computer = [],
          history = [],
          state = this.state.on,
          swich = state == true ? false : true,
          rando = Math.floor(Math.random() * 4)
      computer.push(rando)
      this.setState({on: swich, history: history, computer: computer})
      this.SimClicks(computer)
   // }
  }
  handleClicks(number){
    if(this.state.on == true){
      let arr = this.state.history
      arr.push(number)
      this.setState({history: arr})
    }
  }

  Bumper(lights, color, rotate, number){
    if(this.state.on == true){
      return <Bumper lights={lights} backgroundColor={color} transform={rotate} number={number} onClick={() => this.handleClicks(number)} ai={this.state[number]}/>
    }else{
      return <Bumper lights={color} backgroundColor={color} transform={rotate} number={number}/>
    }
  }

  render(signals){
    const styles = {
      height: '86vh',
      width: '86vh',
      backgroundColor: 'black',
      borderRadius: '86vh',
      margin: 'auto',
      marginTop: '8vh',
      overflow: 'auto',
      border: 'none',
      boxShadow: '10px 0px 20px 1px'
    }

    return(
      <div style={styles}>
        {this.Bumper('#FFcce0','#FF0099','rotate(180deg)',3)}
        {this.Bumper('#ffFFFF','#00FFFF','rotate(270deg)',0)}
        {this.Bumper('#B3FFB3','#00FF00','rotate(90deg)',2)}
        {this.Bumper('#FFFFE0','#FFFF00','rotate(0deg)',1)}
        <Start onClick={() => this.Start()} />
        <Counter count={this.state.count} />
      </div>
    )
  }
}

class Bumper extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      lights: false,
      change: "0"
    }
  }
  componentWillReceiveProps(){
    if(this.props.ai && this.props.ai != this.state.change){
      let set = this.props.ai
      this.LightsOn()
      this.setState({change: set})
    }
  }
  LightsOn(){
    this.setState({lights: true})
    setTimeout(function(){
      this.setState({lights: false})
    }.bind(this), 200)
  }

  handleClick(){
    this.LightsOn()
    this.props.onClick()
  }
  render(){
    const style = {
      backgroundColor: this.state.lights === true ? this.props.lights : this.props.backgroundColor,
      transform: this.props.transform,
      height: '40vh',
      width: '40vh',
      borderBottomRightRadius: '40vh',
      float: 'left',
      display: 'flex',
      flexWrap: 'wrap',
      cursor: 'pointer'
    }

    return(
      <div style={style} onClick={() => this.handleClick()} />
    )
  }
}
class Start extends React.Component{
  render(){
    const style = {
      height: '10vh',
      width: '20vh',
      position: 'absolute',
      backgroundColor: '#008000',
      borderRadius: '10px',
      fontSize: '6vh',
      lineHeight: '1',
      color: 'black',
      textAlign: 'center',
      fontFamily: 'Supermercado One',
      cursor: 'pointer',
      boxShadow: '0px 4px 26px 0px'
    }
    return(<button style={style} onClick={this.props.onClick}>Start!</button>)
  }
}

ReactDOM.render(
<Board />,
document.getElementById('root')
)

我并不是在寻找一定要修复的代码。或多或少只是一种以指定顺序单独更新子组件的方法。

Answer 1

setState 使用第二个 callback 参数来通知您状态已更新。您可以使用它来创建您描述的行为。请不要像 Dane 描述的那样使用 setTimeout。这可能会导致意外行为。

this.setState({foo:'bar'},()=> {
   assert this.state.foo === 'bar';
});