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

Question

im trying to refresh my flatlist from some page without going back to the principal menu, but it doesnt work.

I've already readed about extraData, but it doesnt work either.

Basiclly my program is like that: I have a page called "passwords" and i add some passwords there from another page called "add passwords" . When i click to add a password, i want to refresh the flatlist from the page "passwords" to show me the password that i just added.

This is my code from the page "add 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>

);
}
}

And this is my page "passwords" where i want to refresh

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>
);

Answer 1

当前，您不更改父组件的状态，而是要将父组件的状态从child更改为parent和paass中的处理函数，以child作为prop并在需要的地方从child调用该函数。

Answer 2

状态的任何更改都会重新提交项目。

Answer 3

You can use your listener to update the state.

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)
  });
}