ReactJS變量變化不是渲染元素

我有一個相當簡單的情況（我使用ReactJS和A-Frame/A-Frame React，但這不應該影響任何東西）。ReactJS變量變化不是渲染元素

我有一個實體，提示用戶他們可以點擊/滑動一個對象。我希望該實體在用戶點擊所述對象後消失，然後在10秒後重新出現。

我是比較新的反應，以便可以被錯在這裏做的事情：

在我的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>

我的「腹地」組件是兄弟姐妹，像這樣：

{ 

    <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時觸發。

所以基本的問題是，爲什麼沒有反應過來反應-ING我的變量的變化？我是否需要迫使它以某種方式重新呈現？

來源

2017-09-05 Jascination

'showHinter'屬於React'state'嗎？我在你的代碼中看不到你的'setState'。 –

我在開始時犯了同樣的錯誤。用setState做每一個改變意味着把你的showHinter作爲一個狀態。 this.setState（{showHinter：false）}然後檢查「this.state.showHinter &&」 – Tiega

@Tiega啊，是的，你已經明白了！發佈這個答案，我會接受它。 – Jascination

你應該做的每一個變化，該效果的觀點或你希望通過狀態重新渲染。

在你的情況下，你做了類似的事情（未測試）：

<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> 
}

來源

2017-09-05 14:22:49 Tiega

ReactJS變量變化不是渲染元素

回答

相關問題