React JS交通灯模拟器中的模式错误

Question

我正在尝试使用 ReactJS 构建一个红绿灯。我需要红绿灯按红色、黄色、绿色、红色、黄色、绿色等顺序行驶。我当前的代码给了我不同的模式。我不太清楚如何在这个上使用 setInterval，我真的可以使用一些帮助。我在 CodePen 上查看了 CarterTsai 对同一问题的解决方案，但我既无法理解他的大部分代码，也无法将其转换为对 stackblitz 友好的格式以使其适应我的代码。有人有答案吗？任何帮助表示赞赏！如果有人能提供一个包含两个组件的解决方案，那就太好了——一个改变交通信号灯状态，另一个利用该状态显示实际的交通信号灯（这是我作业的要求）。

这里是查看我在 stackblitz 上的项目的链接：https://stackblitz.com/edit/react-eqkhd7?file=src/style.css

我在 App.js 中的代码：

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: '',
      color2: '',
      color3: ''
    };

    setInterval(this.changeColor1.bind(this), 2000);
    setInterval(this.changeColor2.bind(this), 4000);
    setInterval(this.changeColor3.bind(this), 6000);
  }

  changeColor1 = () => {
    this.setState({ color1: 'red', color2: '', color3: '' });
  };

  changeColor2 = () => {
    this.setState({ color1: '', color2: 'yellow', color3: '' });
  };

  changeColor3 = () => {
    this.setState({ color1: '', color2: '', color3: 'green' });
  };

  render() {
    return (
      <div>
        <span style={{ backgroundColor: this.state.color1 }} class="circle" />
        <p />
        <span style={{ backgroundColor: this.state.color2 }} class="circle" />
        <p />
        <span style={{ backgroundColor: this.state.color3 }} class="circle" />
      </div>
    );
  }
}

style.css：

h1,
p {
  font-family: Lato;
}

.circle {
  margin: auto;
  height: 100px;
  width: 100px;
  border: 5px black solid;
  border-radius: 50%;
  display: block;
}

index.js：

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

您可以使用setTimeout 执行此操作，并在当前红绿灯执行后调用其他红绿灯函数。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: '',
      color2: '',
      color3: ''
    };

    setTimeout(this.changeColor1, 2000);
  }

  changeColor1 = () => {
    this.setState({ color1: 'red', color2: '', color3: '' });
    setTimeout(this.changeColor2, 2000);
  };

  changeColor2 = () => {
    this.setState({ color1: '', color2: 'yellow', color3: '' });
    setTimeout(this.changeColor3, 2000);
  };

  changeColor3 = () => {
    this.setState({ color1: '', color2: '', color3: 'green' });
    setTimeout(this.changeColor1, 2000);
  };

这里是working fiddle

Answer 2

您的问题是您设置了 3 个不同的间隔，因此所有 3 个状态更改函数都在不同的时间间隔被连续调用。特别是，第一个使其变为红色的事件每 2 秒发生一次 - 这将包括尝试将其变为黄色时每 4 秒以及每 6 秒尝试将其变为绿色时的次数。这将导致不可预测的结果，因为没有真正的方法可以知道每次哪个函数首先触发 - 它可能取决于“随机”因素，或者您使用的浏览器。

我假设您的意图是每 2 秒定期更改一次，按红色、黄色、绿色等顺序。为此，请创建一个 single 函数来检查当前状态和更新适当地 - 每 2 秒安排一次。

这是实现这一目标的众多方法之一。保留 render 原样，但用以下方法替换其他方法：

  constructor(props) {
    super(props);
    this.state = {
      color1: 'red',
      color2: '',
      color3: ''
    };

    setInterval(this.changeColor, 2000);
  }

  changeColor1 = () => {
    this.setState({ color1: 'red', color2: '', color3: '' });
  };

  changeColor2 = () => {
    this.setState({ color1: '', color2: 'yellow', color3: '' });
  };

  changeColor3 = () => {
    this.setState({ color1: '', color2: '', color3: 'green' });
  };

  changeColor = () => {
    if (this.state.color1) {
      this.changeColor2();
    } else if (this.state.color2) {
      this.changeColor3();
    } else {
      this.changeColor1();
    }
  };

（实际上，拥有一个保存当前颜色的状态属性会更整洁，但这也意味着要重写 render。我会让你考虑这是否适合你。）

PS：这里实际上不需要bind，因为您的方法是使用箭头函数定义为属性的。您可以使用其中一种 - bind 或箭头函数 - 但同时使用这两种功能毫无意义。