Question

我必须根据某些条件渲染touchablehighlight。这是渲染方法的一部分：

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值改变状态，但没有运气。

更新

更多代码：

渲染方法：

 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)'
        });
      }
});
});
}

Answer 1

这是因为背景而发生的。

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

Answer 2

这看起来不是有效代码

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

应该是

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

要触发它你会做

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

Answer 3

您是否在构造函数中使用了bind(this)？

或使用 ES6箭头功能

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

Answer 4

尝试更改someMethod

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

现在，您的方法将使用正确的this上下文来更改您的状态！

组件未在动态rendring上更新

4 个答案: