Node.js 未捕获（承诺中）类型错误：无法读取属性'；红色'；空的

//如果我尝试在Heroku上的生产环境中运行此应用程序，则在此处获取空错误

import React from "react";
import io from "socket.io-client";

class TrafficLight extends React.PureComponent {
  state = { lamp: null, currentcolor: "red" };

  // turnLampOn event handler
  turnLampOn = async () => {
    while (true) {

//应用程序尝试执行此方法时出现空值。

// currentcolor=red wait 'red' ms and enable 'green'

      await this.waitSomeSeconds("green", this.state.lamp.red);
      // currentcolor=green wait 'green' ms and enable 'yellow'
      await this.waitSomeSeconds("yellow", this.state.lamp.green);
      // currentcolor=yellow wait 'yellow' ms and enable 'red'
      await this.waitSomeSeconds("red", this.state.lamp.yellow);
    }
  };

  waitSomeSeconds = (color, wait) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(
          this.props.street +
            ": from " +
            this.state.currentcolor +
            " to " +
            color +
            ", wait=" +
            wait
        );
        this.setState({ currentcolor: color });
        resolve();
      }, wait);
    });
  };

  componentDidMount = async () => {
    // connect to server
    //let socket = io.connect("localhost:5000", { forceNew: true });
    // send join message to server, pass a payload to it (street name specified via props)
    // connect to server on Heroku cloud
    const socket = io.connect();

    socket.emit("join", { streetName: this.props.street }, err => {});
    // wait on 'turnLampOn'
    socket.on("turnLampOn", lampData => {
      console.log("turnLampOn", lampData);
      // Set new lamp data and start trafficlight
      if (this.state.lamp === null) {
        this.setState({ lamp: lampData });

})

//获取当前颜色帮助器
getColor=color=>（this.state.currentcolor==color？颜色：“白色”）；
render（）{
返回(
{这是道具街}
);
}
}
导出默认交通灯；

此应用程序在开发模式下工作正常，错误发生在生产环境中。 应用程序有一个Node.js服务器，其中包含socket.io以建立连接

React的功能是异步的，不会立即更新状态。根据文件

将setState（）视为更新组件的请求，而不是即时命令。为了更好地感知性能，React可能会延迟它，然后在一次过程中更新多个组件。React不保证立即应用状态更改

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得在调用setState（）之后立即读取This.state成为一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（updater，callback）），这两种回调都保证在应用更新后触发。如果需要基于上一个状态设置状态，请阅读下面的updater参数

有关更多信息，请查看

要解决您的问题，请在回调到

setState

  // Get current color helper
  getColor = color => (this.state.currentcolor === color ? color : "white");

  render() {
    return (
      <div className="light">
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("red"), margin: ".5rem" }}
        />
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("yellow"), margin: ".5rem" }}
        />
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("green"), margin: ".5rem" }}
        />
        <div style={{ textAlign: "center", fontName: "Helvetica" }}>
          {this.props.street}
        </div>
      </div>
    );
  }
}

export default TrafficLight;

  // Get current color helper
  getColor = color => (this.state.currentcolor === color ? color : "white");

  render() {
    return (
      <div className="light">
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("red"), margin: ".5rem" }}
        />
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("yellow"), margin: ".5rem" }}
        />
        <div
          className="lamp"
          style={{ backgroundColor: this.getColor("green"), margin: ".5rem" }}
        />
        <div style={{ textAlign: "center", fontName: "Helvetica" }}>
          {this.props.street}
        </div>
      </div>
    );
  }
}

export default TrafficLight;

class TrafficLight extends React.PureComponent {
    state = { lamp: null, currentcolor: "red" };

    // turnLampOn event handler
    turnLampOn = async () => {
        while (true) {

            await this.waitSomeSeconds("green", this.state.lamp.red);
            // currentcolor=green wait 'green' ms and enable 'yellow'
            await this.waitSomeSeconds("yellow", this.state.lamp.green);
            // currentcolor=yellow wait 'yellow' ms and enable 'red'
            await this.waitSomeSeconds("red", this.state.lamp.yellow);
        }
    };

    waitSomeSeconds = (color, wait) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(
                    this.props.street +
                    ": from " +
                    this.state.currentcolor +
                    " to " +
                    color +
                    ", wait=" +
                    wait
                );
                this.setState({ currentcolor: color });
                resolve();
            }, wait);
        });
    };

    componentDidMount = async () => {
        // connect to server on Heroku cloud
        const socket = io.connect();

        socket.emit("join", { streetName: this.props.street }, err => { });
        // wait on 'turnLampOn'
        socket.on("turnLampOn", lampData => {
            console.log("turnLampOn", lampData);
            // Set new lamp data and start trafficlight
            if (this.state.lamp === null) {
                // To resolve this error you can call `turnLampOn`
                // in a callback passed to setState
                this.setState({ lamp: lampData }, () => this.turnLampOn());
            }
        });
    };
}