組件未更新動態rendring

我必須呈現基於一些condition.Here一個touchablehighlight是渲染方法的一部分：組件未更新動態rendring

render(){ 
    . . . 

{ !this.state.isNewMsg? 
     <View key={this.state.isNewMsg}> 
     <TouchableHighlight 
      <Text> 
      . . . 
      </Text> 
     </TouchableHighlight> 
     </View> 
    : 

    <View> 
    <TouchableHighlight> 
    . . . 
    </TouchableHighlight> 
    </View> 
}

，我的狀態改變：

someMethod() { 

    this.setState({isNewMsg:true}); 

}

但組件不會更新。有條件的重新發布有哪些錯誤？我曾嘗試分配touchablehighlight Id，然後使用id值更改狀態，但沒有運氣。

UPDATE

更多代碼：

Render方法：安裝

render() { 
     return ( 
    . . . 

{!this.state.isNewMsg? 

    <View key={this.state.isNewMsg} style={{ flex:1, width:200, alignSelf:'center'}}> 
    <TouchableHighlight underlayColor = {'white'} 
    onPress={this._seeMessage.bind(this)} 
    disabled={this.state.dontShowMsg} > 
    <Text style = {[styles.button,{color:this.state.buttonColor, 
     backgroundColor:this.state.buttonBackgroundColor}]}> 
      Messages 
    </Text> 
    </TouchableHighlight> 
    </View> 
    : 
    <View key={this.state.isNewMsg} style={{ flex:1, width:200, alignSelf:'center'}}> 
    <TouchableHighlight 
    underlayColor = {'white'} 
    onPress={this._seeMessage.bind(this)} 
    > 
     <Image 
     style={styles.button} 
     source={require('./newMsg.gif')} 
     /> 
    </TouchableHighlight> 
    </View> 
} 
. . . 
<otherComponents/> 
. . .

法呼籲組件：

getMessagesFireBase(){ 
    var id=this.state.uid; 
    var that = this; 
    Firebase.ref('/msg/' + this.state.uid).once('value').then(
    function(snapshot) { 
    snapshot.forEach(function(child){ 
    var key = child.key; 
    var value = child.val(); 
    if(that.isObject(value) && value.isReply) 
     { 
     if(that.state.oldMsg!==value.reply) 
     { 
      try { 
       AsyncStorage.setItem('oldMsg',value.reply); 
       this.setState({isNewMsg:true}); //not updated 
      } catch (error) { 
       // Error saving data 
      } 
     } 

     that.setState({userQuestion:value.umsg, //works fine 
      userReply:value.reply, 
      dontShowMsg:false, 
      buttonColor:'white', 
      buttonBackgroundColor:'rgba(128,0,0,0.3)' 
     }); 
     } 
}); 
}); 
}

來源

2017-04-06 joey rohan

這是因爲上下文而發生的。

if(that.state.oldMsg!==value.reply) 
    { 
     try { 
      AsyncStorage.setItem('oldMsg',value.reply); 
      this.setState({isNewMsg:true}); //not updated. Because of THIS 
      /* You even saved context into `that` variable. 
       Forgot about it? Anyway change it to `that.setState()` 
       and everything should be ok. 
      */ 
     } catch (error) { 
      // Error saving data 
     } 
    }

來源

2017-04-08 18:02:45

嗯，你知道一些簡單的自殺方法嗎？ –

放輕鬆:)這都是因爲JavaScript。每個人都犯過這樣的錯誤。 –

使用ESLint。它會幫助你避免這樣的錯誤。 –

這不看是有效的代碼

someMethod() { 
    someCallback(){ 
    this.setState({isNewMsg:true}); 
    } 
}

它應該是這樣的

someMethod() { 
    this.setState({isNewMsg:true}); 
}

，並觸發它，你會做

<TouchableHighlight onPress={this.someMethod}> 
... 
</TouchableHighlight>

來源

2017-04-06 15:22:48 browniefed

對不起，粗糙的工作，就像你說的那樣 –

你能展示更多的代碼嗎？是否有組件邊界？你確定你沒有通過價值是一個道具和尋找'this.props.isNewMsg'？在這裏沒有很多東西出來一個錯誤消息。如果你可以使用'遠程調試器'選項。然後把一個斷點，並確保它被調用，這將是有益的。 – browniefed

如果有幫助，我已經更新了一些代碼。即使我強制更新它，組件也不會重新渲染。 –

你在構造函數中使用bind(this)？

或者使用ES6箭頭功能

<TouchableHighlight onPress={() => this.someMethod()}> 
... 
</TouchableHighlight>

來源

2017-04-07 12:24:05

我沒有發射任何'onPress'事件。狀態恰好在其他事件上更新，我相信事件被解僱了。 –

所以你的問題可能'這'不正確？嘗試在日誌中。 –

我設置狀態的方法被解僱。 –

試圖改變自己的someMethod

someMethod =() => { 
    this.setState({isNewMsg:true}); 
}

現在你的方法將有正確的this上下文來改變你的狀態！

來源

2017-04-08 17:57:14

組件未更新動態rendring

回答

相關問題