如何防止子頁面的狀態變量之一改變其值？如何保留初始值作為父頁面的道具？ -ReactJS

Question

當父級中名為“ isChildOpen”的標志為true時，將打開子頁。 現在，我想使我的孩子中的狀態變量filter2不可更改。 當我打開子頁面時，filtered和filtered2應該從父項獲得相同的值，但是盡管filterd可以在子項中的任何操作期​​間更改，但filterd2每次都應保留其打開子項的初始值。 當打開父級時，它應該從父級獲取其值，但由於子級中的任何操作而不能更改。

子代碼

 class Child extends Component {
    constructor(props) {
     super(props);
      this.state = {
       data: this.props.data,
       filtered: this.props.filtered
       filtered2: this.props.filtered
       };
     }

我嘗試了Object.freeze，但沒有幫助。

這是孩子從父頁面打開的方式

         {this.state.isChildOpen &&
         <Child 
            data={this.state.data}
            filtered={this.state.filtered}
          />}

有人可以在這方面幫助我嗎？ 在子級中的任何操作期​​間，filterd均可更改，但在剛剛打開子級后，filterd2應保留初始值。

Answer 1

我相信你可以使用this.props.filtered.slice()

這將復制該值

Answer 2

{this.state.isChildOpen &&
   <Child 
     data={this.state.data}
     filtered={this.state.filtered}
     filtered2={this.state.filtered2}
   />}

當this.state.isChildOpen開關為false，然后再真正的新實例Child創建等構造再次與新值調用filtered2 。

您應該將isChildOpen作為道具傳遞給Child並從那里處理渲染

<Child 
  data={this.state.data}
  filtered={this.state.filtered}
  filtered2={this.state.filtered2}
  isChildOpen={this.state.isChildOpen}
/>}


class Child extends Component {
    constructor(props) {
     super(props);
      this.state = {
         filtered2: this.props.filtered2
       };
     }

     render() {
       const { data, filtered, isChildOpen } = this.props; // this props will update following the parent
       const { filtered2 } = this.state; //this prop will be controlled by the child and will keep the value once the instantiation
       if(!isChildOpen) {
          return null;
       }
       // otherwise render the component
     }