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

Question

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

这里是 link 查看我在 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

你的问题是你设置了 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 或箭头函数 - 但同时使用两者毫无意义。

Answer 2

您可以使用 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

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

Pattern error in React JS traffic light simulator

javascript

reactjs

state

setinterval

stackblitz