如何在 react-native 上刷新/重新渲染平面列表？答案

【问题标题】：How to refresh/re-render flatlist on react-native?如何在 react-native 上刷新/重新渲染平面列表？
【发布时间】：2020-01-04 13:30:35
【问题描述】：

我试图在不返回主菜单的情况下从某个页面刷新我的平面列表，但它不起作用。

我已经阅读了有关 extraData 的内容，但它也不起作用。

基本上我的程序是这样的：我有一个名为 "passwords" 的页面，我从另一个名为 "add passwords" 的页面添加了一些密码。当我点击添加密码时，我想从 "passwords" 页面刷新平面列表，以显示我刚刚添加的密码。

这是我的代码来自页面“添加密码”

...

state = {
arr: [],
local: '',
password: '',
obj: {
  local: '',
  password: ''
},
count: 1,
texto: ''
};

componentDidMount() {
//Here is the Trick
const { navigation } = this.props;
//Adding an event listner om focus
//So whenever the screen will have focus it will set the state to zero
this.focusListener = navigation.addListener('didFocus', () => {
  this.setState({ count: 0 });
});
}

storeItem(item) {
try {
  //we want to wait for the Promise returned by AsyncStorage.setItem()
  //to be resolved to the actual value before returning the value~
  console.log(item)
  var joined = this.state.arr.concat(item);
  console.log(joined)

  this.setState({ arr: joined })

  AsyncStorage.setItem('array', JSON.stringify(joined));
  console.log(this.state.arr)

} catch (error) {
  console.log(error.message);
}
}

 componentWillMount() {
 AsyncStorage.getItem('array').then(array => {
  item = JSON.parse(array)
  array ? this.setState({ arr: item }) : null;
  console.log(item)


})
}



render() {

return (

  <View style={styles.container}>
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => this.setState({ local: text })}
      value={this.state.local}
    />

    <TextInput
      secureTextEntry={true}
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => this.setState({ password: text })}
      value={this.state.password}
    />


    <Button title='Adicionar'
      onPress={() => this.storeItem({ local: this.state.local, password: this.state.password }) + alert("Adicionado com sucesso!") + this.props.navigation.navigate('Passwords')}      
    ></Button>

  </View>

);
}
}

这是我要刷新的页面“密码”

componentWillMount() {
const { navigation } = this.props;
this.willFocusListener = navigation.addListener(
  'willFocus',
  () => {
    this.setState({ count: 10 })
  }
)

AsyncStorage.getItem('array').then(array => {
  item = JSON.parse(array)

  item ? this.setState({ arr: item }) : null;
  console.log(this.state.arr)
})

}

 renderItem = ({ item }) => (
<View style={{ flexDirection: 'row' }} style={styles.passwordContainer}>
  <Text> {item.local} </Text>
  <Text> {item.password} </Text>
</View>

)

render() {
return (
  <View style={styles.container}>
    <FlatList
      data={this.state.arr}
      renderItem={this.renderItem}
      extraData={this.state} //this is what i tryied
    />
  </View>
);

【问题讨论】：

标签： react-native refresh render

【解决方案1】：

你可以使用你的监听器来更新状态。

componentWillMount() {
  this.willFocusListener = navigation.addListener(
   'willFocus',
   () => this.updateData()
}

updateData = () =>  {
  this.setState({ count: 10 });
  AsyncStorage.getItem('array').then(array => {
    item = JSON.parse(array)
    item ? this.setState({ arr: item }) : null;
    console.log(this.state.arr)
  });
}

【讨论】：

【解决方案2】：

任何状态更改都会重新渲染项目。

【讨论】：