Question

我从android切换到反应本机。完全天真。我想在react native中实现像recyclerview这样的东西，并找到有关 FLATLIST 的信息现在的问题是，最初我的数据变量为空，后来我将数据添加到该变量中。现在，我如何通知平面列表数据已更改，现在应该重新呈现自己。

就像在recyclerview中一样，我们使用adapter.notifyDataSetChanged（）;通知回收者有关更改的信息，现在应该重新呈现自己的内容

我正在使用的代码是

export default class Convo extends Component{

constructor(props){
super(props);
this.state = {
  loggedIn: 'false',
  title: 'Login/SignUp',
  messages: []
};
this.downloadConversation = this.downloadConversation.bind(this);
}

componentDidMount(){
this.downloadConversation();
}

 downloadConversation(){
    this.setState(
      {message: [
        {
            key: "HIHI",
            name: "lets  this bullshit",
            message: "I i i"
          },
          {
              key: "HIHI2",
              name: "lets change  bullshit",
              message: "I i i"
            },
            {
                key: "HIHI3",
                name: "lets change this ",
                message: "I i i"
              }
      ]}
    );
//After updating the messages object, i want to notify flat list about 
//the change, basically i will be updating this object asynchronously  
// in background which will take time. for now i am updating directly 
//to show you
}


renderFlatListItem(item) {
return (
  <View key={item.key} style={styles1.flatviewItem}>
     <Text>User1</Text>
     <Text style={styles1.name}>{item.name}</Text>
     <Text style={styles1.messageStyle}>{item.message}</Text>
   </View>
   )
   }

 render(){
  return(
    <View style={styles1.container}>
      <View style={styles1.header}>
        <Text style={styles1.h2style}>Conversation List</Text>
      </View>
      <FlatList
        style={styles1.flatview}
        extraData={this.state}
        keyExtractor={item=>item.key}
        showsVerticalScrollIndicator={true}
        data={this.state.messages}
        renderItem={({item}) => this.renderFlatListItem(item)}
      />
    </View>
  );
 }

}

Answer 1

当组件状态更改时，您的组件应自动重新渲染（如果render方法中的任何内容引用了已更改的状态）。我认为当在downloadConversation（）方法中设置setState时，您只需要将“ message”更改为“ messages”。您的FlatList正在寻找this.state.messages，而不是this.state.message，并且this.state.messages从未更改。只需解决该拼写错误，并希望可以解决它。

React Native如何重新加载平面列表

1 个答案: