当props通过parent状态更新时,React - child不更新

react - child not updating when props updated through parent state

本文关键字:更新 React child 通过 parent 状态 props      更新时间:2023-09-26

我有一个react native组件-

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再次被调用,我的列表视图更新时,父状态更新。事实并非如此。知道我哪里做错了吗?

当前代码看起来不错。我想建议两件事:

  1. 确认state中的message属性确实更新为onSubmit()。您可以在chat类的return命令之前记录它

  2. 确认MessageList组件的props中的message属性在父组件更新的相同周期内获得更新

我这么说有一个前提:大多数状态更新的问题通常是因为与数据更新不一致。如果数据没有改变,组件就不会被重新呈现。