如何在 React Native 中与父组件同时重置子 class 组件的状态？

Question

我是 React Native 的新手，正在努力与父组件同时清理子组件的状态。

我想做的是：

从MainMap.js导航到最后一屏TripsListScreen.js后（整个过程是一个Stack of 4 screens，嵌套在一个Drawer中），我得到了所有存储在Redux的store中的数据，并且在 TripsListScreen.
然后我按 add 按钮创建新行程。我在 MainMap 成功重置了状态。但是，PlaceInput 组件中的状态（TextInput 的 value 道具）仍然存在。我们怎样才能重置它呢？

这是 MainMap.js 的状态：

const initialState = {
    hasMapPermission: false,
    _userLocationDisplayed: null,
    userLatitude: 0,
    userLongitude: 0,
    initial_UserLatitude: 0,
    initial_UserLongitude: 0,
    userLocationAddress: '',

    destination: [],
    destinationName: [],
    destinationAddress: [],
    destinationCoords: [],
    destinationImageUri: [],

    numOfInput:[0,1],
    counter: 1,
    wayPoints: [],
    markers: [],

    doCleanState: 'no' // Right here I want to pass the prop from PlaceInput as this.state.doCleanState
};
const cleanUpState = {
    hasMapPermission: false,

    destination: [],
    destinationName: [],
    destinationAddress: [],
    destinationCoords: [],
    destinationImageUri: [],

    numOfInput:[0,1],
    counter: 1,
    wayPoints: [],
    markers: [],

    doCleanState: 'yes'
}

class MainMap extends React.Component{

    constructor(props){
        super(props);
        this.state = initialState;
    };


    componentDidMount(){
        console.log('Hello',this.props);
        console.log('This is state', this.state);
        this._requestUserLocation();
        this._unsubscribe = this.props.navigation.addListener('focus', () => {
            this.setState(cleanUpState);

        })
    };

    componentWillUnmount(){
        Geolocation.clearWatch(this.watch_location_id);
        this._unsubscribe();

    }

   render(){
      return(
        //...
        <PlaceInput
            id={itemData}

            defaultValue={this.state._userLocationDisplayed}
            displayDefaultValue={!index}
            doCleanState={this.state.doCleanState}
       />
  );
}

基本上，我尝试将 PlaceInput 中的道具作为 MainMap 中的状态传递。重置MainMap的状态时（doCleanState的状态也会改变，不是重置），PlaceInput的状态不会重置

这里是PlaceInput:

//...
class PlaceInput extends React.Component{

    constructor(props){
        super(props);
        this.state={
            predictions: [],
            destinationInput: '',
        }
    }

    componentDidUpdate(prevProps){
        if(this.props.doCleanState !== prevProps.doCleanState){
            this.setState({
                destinationInput: '',
            })
        }
    }

    render(){
        return(
            <TextInput 
                key={this.id}

                placeholder='Search your places'

                onChangeText={(input) => {
                    this.setState({destinationInput: input});
                    this.getPlacesDebounced(input);
                }}
                value={this.props.displayDefaultValue ? this.props.defaultValue : this.state.destinationInput} // props.defaultValue is state of MainMap : 'Your location'
                             // destinationInput is what the users type

             />
   );
}
//...

当我导航回 MainMap 时，destinationInput 状态仍然存在于 PlaceInput

请帮忙！！！

Answer 1

看看这是否有帮助：

class MainMap extends React.Component{
  // ...
    componentDidMount(){
        // ...
        this._unsubscribe = this.props.navigation.addListener('focus', () => {
          // destructure the cleanUpState so you aren't passing a global reference around
          this.setState({...cleanUpState});
        });
    };
    // ...

当您刚刚将状态分配给 cleanUpState 时，您现在可以引用该全局对象并在整个应用程序中修改它。您需要确保解构对象，以便传递它们的副本，而不是它们的引用。

Answer 2

在 PlaceInput 组件中，将 props 值传递给所需的父级，

class PlaceInput extends React.Component{

    //... your code method
    this.props.updateClean("") // pass your value to parent

}

然后在MainMap组件中，

<PlaceInput
        id={itemData}

        defaultValue={this.state._userLocationDisplayed}
        displayDefaultValue={!index}
        doCleanState={this.state.doCleanState}
        updateClean={(text)=> setState({doCleanState:text})} // <-- change like this. 
   />

如何在 React Native 中与父组件同时重置子 class 组件的状态？

How to reset state in children class component at the same time with parent component in React Native?

javascript

reactjs

react-native

react-state-management