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

我是React Native的新手，与家长一起努力清理children组件的状态

我想做的是：

从

MainMap.js

导航到最后一个屏幕

TripsListScreen.js

（整个过程是一个由4个屏幕组成的堆栈，嵌套在一个抽屉中），我获得了存储在Redux存储中的所有数据，并将其显示在

TripsListScreen

中

然后，我按下

add

按钮创建新行程。我成功地在

MainMap

上重置了状态。但是，

PlaceInput

组件中的状态（

value

prop of

TextInput

）仍然存在。我们怎样才能重新设置呢 下面是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}
       />
  );
}

当我导航回

MainMap

时，

destinationInput

状态仍在

PlaceInput

请帮忙

看看这是否有帮助：

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

时，您现在有了对该全局对象的引用，并且正在整个应用程序中对其进行修改。您需要确保对对象进行分解，以便传递对象的副本，而不是它们的引用。

查看这是否有帮助：

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

时，您现在有了对该全局对象的引用，并且正在整个应用程序中对其进行修改。您需要确保对对象进行分解，以便传递对象的副本，而不是它们的引用。

在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. 
   />

setState（{doCleanState:text}）}//

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

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. 
   />

setState（{doCleanState:text}）}//