为什么第一次单击按钮时我的屏幕没有更新，但之后却运行良好？

Question

这是我第一次制作有限状态自动机。我尝试制作一个停车灯类程序，如果您单击按钮，灯会改变一次，从绿色开始，如果再次单击则变为黄色，然后变为红色，然后再次循环。我设法让它工作，除了一个小错误。在屏幕更新之前需要点击两次，我真的不知道如何解决。

我在我的控制台上注意到，当我点击它时 currentLightState 会发生变化，但在第一次点击时会恢复到之前的颜色。我发现这是因为它与我的状态不同步。但是，当我尝试将 currentLightState 放入 class 并分配 this.state.light 时，currentLightState 变为未定义。我尝试在 this.state.light 的末尾添加一个 .bind(this)，但我只是收到另一个错误，说它不是一个函数。有什么建议吗？

我没有 post 我的更新功能或我的 onHandleClick 功能，因为它不直接处理 currentLightState。

const lightMachine = {
  green:{
    LIGHT: 'yellow'
  },
  yellow:{
    LIGHT: 'red'
  },
  red:{
    LIGHT: 'green'
  }
}

// current location of currentLightState
let currentLightState = 'green';
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          light: 'green'    //initial value
        };
      }
    transition(state, action){
      // This is where my currentLightState messes up the first run 
      currentLightState = this.state.light

      const nextLightState =  lightMachine[currentLightState][action]
      this.setState({light: nextLightState}) 
    }
    render(){

        return(
            <div>
              <button onClick={this.onHandleClick.bind(this)}>
                change the Light!
              </button>
                {currentLightState}
            </div>
            );
        }
    }

编辑：这是我的 onHandleClick 函数 :)

    onHandleClick(){
      this.update(currentLightState)

    };

此外，我想我通过将渲染函数中的 currentLightState 替换为 this.state.light 解决了我的问题。

不知道这是否是一个合法的修复程序，但它目前似乎有效。

如果有人仍然可以回答为什么当您将 currentLightState 放入 class 并为其分配 state.light 时，它会变得未定义，那就太好了。这将有助于扩展我的 React 知识 :)

Answer 1

欢迎来到 Jr194 板！

关于主题，我认为将 currentLight 和 lightMachine 保留为由您的组件状态管理的值将是有益的。这有助于确保您的所有逻辑都在同一上下文中，避免像 "blah blah is not defined."

这样的奇怪错误

其次，您似乎已经定义了几个真正可以缩小到一个的函数。 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 中放入 class 时会出现错误的问题。这不是 React 问题，而是 JavaScript 问题。

让我们来看一些例子：

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

如您所知，这不会给我们任何错误。我们正在利用 class 之外定义的变量，这完全没问题。

现在让我们看看这个

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

   test = this.state.greeting

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

这给了我们一个错误。为什么，因为在您的 render 方法中，您将 test 视为一个变量，而实际上它不是。在像您所写的那样的 class 对象中，currentLightState 和现在的 test 被视为 properties，而不是变量。为了访问 class 中的属性，您需要使用“this”关键字，您已经使用 this.update, this.handleOnClick 等进行了操作, 这也是属性。

现在我们知道这段代码可以工作了。

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

   test = this.state.greeting

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

为什么第一次单击按钮时我的屏幕没有更新，但之后却运行良好？

Why does my screen not update when I click my button the first time, but works perfectly fine afterwards?

reactjs

finite-state-automaton