反应 - 通过父状态更新道具时子不更新答案

【问题标题】：react - child not updating when props updated through parent state反应 - 通过父状态更新道具时子不更新
【发布时间】：2016-08-18 23:42:43
【问题描述】：

我有一个 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 会在父状态更新时再次被调用，并且我的列表视图也会更新。它不是。知道我做错了什么吗？

【问题讨论】：

尝试将renderRow={this._renderRow.bind(this)}更改为renderRow={this._renderRow()}
@MiGu3X - 这也是我最初的想法，但 ListView 组件需要一个函数：facebook.github.io/react-native/docs/listview.html#renderrow
你能不能至少尝试一下，或者它只是没有工作？，你可以把 renderRow={ () => { this._renderRow() } }
@MiGu3X：那不会有什么不同。

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

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

确认state中的message属性确实更新了onSubmit()。您可以在 chat 类的 return 命令之前记录它。
确认MessageList 上props 中的message 属性在父组件更新的同一周期内更新。

我是在一个前提下这么说的：状态更新的大多数问题通常是因为数据更新不一致。如果数据没有变化，则不会重新渲染组件。

【讨论】：