尝试使用等待时得到“意外的严格模式保留字” [重复]

Question

这里是代码示例：

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentColor: "red"
    };

    while(1){
   await this.changeColor();
    }
  }

  changeColor = async () => {
    console.log("123")
     setTimeout(() => {
      this.setState({
        currentColor: "yellow"
      });
      setTimeout(() => {
        this.setState({
          currentColor: "green"
        });
        setTimeout(() => {
          this.setState({
            currentColor: "red"
          });
        }, 100);
      }, 200);
    }, 300);
  };

  render() {
    return (
      <div>
        <div
          className={this.state.currentColor}
          style={{ width: "100px", height: "100px" }}
        />
      </div>
    );
  }
}

当我在 changeColor() 前面添加 await 时，出现“意外的严格模式保留字”错误。在线代码：https://stackblitz.com/edit/react-cm4jdq。 （我想纠正一个红绿灯演示）

Answer 1

您只能在异步函数的上下文中使用 await。构造函数不是异步的，因此是错误的。构造函数不能声明为异步，因为构造函数必须返回构造的对象，并且异步函数返回一个承诺。

好消息是 changeColor 不需要异步，也不需要在永无止境的 while 循环中等待它。如果您希望它连续运行，请使用setInterval 而不是 setTimeout。

我还建议您循环浏览一组颜色，而不是为每个颜色重复 setTimeout/setState。

const classnames = ['yellow', 'green', 'red'];

function App () {
  const [colorIndex, setColorIndex] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      this.setState({
        colorIndex: (colorIndex + 1) % colors.length
      }), 100);
    });

    // cancel interval on unmount
    return () => clearInterval(interval);
  }, [])

  return <div className={classnames[colorIndex]}> ... </div>
}