Почему мой экран не обновляется, когда я нажимаю кнопку в первый раз, но после этого работает отлично?

Добро пожаловать на доски Jr194!

Что касается темы, я думаю, что будет полезно сохранить currentLight и lightMachine как значения, управляемые состоянием вашего компонента. Это помогает гарантировать, что вся ваша логика находится в одном контексте, избегая странных ошибок, таких как «бла-бла, не определено».

Во-вторых, вы, кажется, определили несколько функций, которые действительно можно сузить до одной. update, onHandleClick и transition, похоже, пытаются сделать одно и то же.

Наконец, рассмотрите возможность реорганизации кода в вашем lightMachine, чтобы он стал немного более интуитивным, чтобы вы могли быстро перейти к следующему свету. Вы уже знаете, какой текущий цвет в родительском ключе, действительно ли им необходимо, чтобы его объект содержал другой ключ с тем же значением?

Рассмотрим следующий код:

class App extends React.Component {
  state = {
    currentLight: "green",
    lightMachine: {
      green: {
        nextLight: "yellow"
      },
      yellow: {
        nextLight: "red"
      },
      red: {
        nextLight: "green"
      }
    }
  };

  transition = () => {
    const currentLight = this.state.currentLight;
    const nextLight = this.state.lightColors[currentLight].nextLight;
    this.setState({
      currentLight: nextLight
    });
  };
  render() {
    return (
      <div>
        <button onClick = {this.transition}>Click Me</button>
        <div>{this.state.currentLight}</div>
      </div>
    );
  }
}

Это должно позволить вам быстро менять свет, как и ожидалось. А вот и песочница: https://codesandbox.io/s/4x08ovyjp7

Дайте знать, если у вас появятся вопросы :)

Также относительно вашего вопроса о том, почему currentLightState выдает ошибку в вашем render, когда вы помещаете его в класс. Это не проблема React, это проблема JavaScript.

Давайте рассмотрим несколько примеров:

const test= "hello"
class Example extends React.Component{
   state = {
       greeting: "woof"
   }
   render(){
     <div>{test}</div>
   }
}

Как вы знаете, это не даст нам никакой ошибки. Мы подключаемся к переменной, которая определена вне нашего класса, и это совершенно нормально.

Теперь давайте посмотрим на это

class Example extends React.Component{
   state = {
       greeting: "woof"
   }

   test = this.state.greeting

   render(){
     <div>{test}</div>
   }
}

Это дает нам ошибку. Почему, потому что в вашем методе рендеринга вы обрабатываете тест как переменную, когда это не так. В объекте class, подобном тому, который вы написали, currentLightState и теперь test обрабатываются как properties, а не как переменные. Чтобы получить доступ к свойству внутри класса, вам нужно использовать ключевое слово «this», то, что вы уже делали с this.update, this.handleOnClick и т. д., которые также являются свойствами.

Теперь мы знаем, что этот код будет работать.

class Example extends React.Component{
   state = {
       greeting: "woof"
   }

   test = this.state.greeting

   render(){
     <div>{this.test}</div>
   }
}