реагировать - ребенок не обновляется, когда реквизит обновляется через родительское состояние

Question

У меня есть среагировать родной компонент -

export default class Chat extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     behavior: 'padding', 
     text: '', 
     messages: this.props.chat.messages 
    }; 
    } 

    updateText() { 
    this.setState({ 
     messages: this.state.messages.concat({ message: this.state.text }) 
    }) 
    } 

    render() { 
    return (

     <KeyboardAvoidingView behavior={this.state.behavior} style={styles.container}> 
     <View style={styles.chatContainer}> 
      <MessageList messages={this.state.messages} /> 
     </View> 
     <View style={styles.textContainer}> 
      <BorderedTextInput 
      placeholder="Type something..." 
      onSubmitEditing={ this.updateText.bind(this) } 
      onChangeText={(text) => this.setState({text})} 
      value={this.state.text} 
      style={styles.textInput} /> 
      <IconBar /> 
     </View> 
     </KeyboardAvoidingView> 

    ); 
    } 
} 

Он имеет сообщения массива в этом состоянии, которое является обновлением, когда ввод текста используется. Это передается компоненту MessageList.

export default class MessageList extends Component { 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.messages), 
    }; 
    } 

    _renderRow(chat){ 
    return (
     <FadeInListRow> 
     <View style={this._bubbleContainerStyle(chat)}> 
      <Text style={this._bubbleStyles(chat)}>{chat.message}</Text> 
     </View> 
     </FadeInListRow> 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.timeContainer}> 
      <Text style={styles.timeText}> 
      Mon, Jun 2, 22:09 
      </Text> 
     </View> 

     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this._renderRow.bind(this)} 
      contentContainerStyle={styles.listView} 
      style={{flex: 1, paddingTop: 50}} 
     /> 
     </View> 
    ) 
    } 
} 

Я ожидал, что _renderRow будет вызван снова, и мое представление списка обновится при обновлении родительского состояния. Это не. Любая идея, что я делаю неправильно?

Answer 1

Текущий код кажется прекрасным. Я хотел бы предложить две вещи:

1. Confirm атрибут message в state действительно обновляется onSubmit(). Вы можете зарегистрировать его непосредственно перед командой return класса chat.

2. Подтвердить атрибут message в props на MessageList Компонент получает обновление в тех же циклах, которые родитель обновляет.

Я говорю об этом на одном предположении: большинство проблем с обновлением состояния обычно связаны с несогласованностью с обновлением данных. Если данные не изменяются, компонент не будет повторно отображаться.