Question

我想在用户重新访问页面后重置组件的状态，一旦用户访问页面1并转到页面2并再次返回页面1，<TextInput>值将保留在那里。一旦用户更改屏幕，我想清除，ComponentDidMount和ComponentWillUnMount不在屏幕更改上运行。

import React from 'react';
import { Image, TextInput, FlatList, StyleSheet, Text, View,TouchableOpacity, ActivityIndicator, Platform } from 'react-native';

export default class RatesScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currency_search: null,

    }
  }
  componentWillUnMount(){
    this.setState({currency_search:null})
  }

  render(){
    return(
      <View>
        <TextInput placeholder="Search" placeholderTextColor="#919191" ref={searchInput => { this.searchInput = searchInput }} onChangeText={currency_search => this.setState({ currency_search: currency_search.toLowerCase() }, this.searchRates)} style={{ padding: 10, borderWidth: 1, borderColor: "#171717", borderRadius: 2, backgroundColor: '#171717', color: "#919191" }} clearButtonMode="always"></TextInput>
      </View>
    )
  }

Answer 1

您可以在page1中使用componentWillUnmount生命周期挂钩来清除其状态。

componentWillUnmount（）{this.setState（{}）}。

如果您显示一些代码，我可以为您提供更具体的答案。

Answer 2

如果您使用的是react-navigation，则可以使用导航生命周期回调，

您可以使用屏幕上的willBlur清空状态。

代码应类似于：

//This code should go in componentDidMount.
const didBlurSubscription = this.props.navigation.addListener(
 'willBlur',
  payload => {
    this.setState({}); //whatever the default state you want to set.
  }
);

// Also, Remove the listener when you are done in willUnmount
didBlurSubscription.remove();

您可以研究有关导航生命周期回调和事件here的更多信息。

希望这会有所帮助。快乐编码：）

重置React Native中组件的状态？

2 个答案: