Question

我有一个相当简单的情况（我正在使用ReactJS和A-Frame / A-Frame React，但这不应该影响到这里的任何东西。）

我有一个实体向用户提示他们可以点击/滑动一个对象。我希望用户点击所述对象后该实体消失，然后在10秒后重新出现。

我对React比较新，所以可能在这里做错了什么：

在我的JS文件的顶部（在我的导入之后，但在class开始之前，我正在做let showHinter = true;

我的render()方法中有一个实体，如下所示：

<AFrameEntity
    events={{
      click: (ev) => {

        showHinter = false;

        setTimeout(() => {
          console.log("showHinter Value:", showHinter)

          /* ↑ This fires, but ↓ this doesn't do anything */

          showHinter = true;
          console.log("showHinter Value:", showHinter)
        }, 5000)

      }
    }}
  >
  </AFrameEntity>

我的“hinter”组件是这样的兄弟，就像这样：

{

  <AFrameEntity /* Bunch of irrelevant stuff here */ >

    // fade out
    {
     !showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="1"
        to="0"
        repeat="0"></a-animation>
    }
      //fade in
    {
     showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="0"
        to="1"
        repeat="0"></a-animation>
    }
  </AFrameEntity>
}

点击后，showHinter被正确设置为false，元素消失。但是，它永远不会再出现。我的控制台日志做发生了，showHinter === false，但我的淡入动画从未发生，并且使用react的devtools检查元素显示我的淡出动画实体，而不是我的淡入一个（应该在showHinter === true时触发。

所以基本的问题是，为什么React没有对我的变量做出反应？我是否需要强制它以某种方式重新渲染？

Answer 1

您应该通过状态执行每次更改，这会影响视图或您希望重新渲染的位置。

在你的情况下，你做的事情（未经测试）：

<AFrameEntity
events={{
  click: (ev) => {

    this.setState({showHinter: false)};

    setTimeout(() => {
      console.log("showHinter Value:", this.state.showHinter)

      /* ↑ This fires, but ↓ this doesn't do anything */

      this.setState({showHinter: true)};
      console.log("showHinter Value:", this.state.showHinter)
    }, 5000)

  }
}}

并检查渲染功能中的状态。

{

  <AFrameEntity /* Bunch of irrelevant stuff here */ >

    // fade out
    {
     !this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="1"
        to="0"
        repeat="0"></a-animation>
    }
      //fade in
    {
     this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="0"
        to="1"
        repeat="0"></a-animation>
    }
  </AFrameEntity>
}

ReactJS变量不是渲染元素

1 个答案: