javascript - tutorial - react native




ক্লিয়ারিং অবস্থা es6 প্রতিক্রিয়া (8)

আমি একটি উপাদান state সাফ করার চেষ্টা করছি কিন্তু এস 6 সিনট্যাক্সের জন্য কোনও রেফারেন্স খুঁজে পাচ্ছি না। আমি ব্যবহার করছিলাম:

this.replaceState(this.getInitialState());

তবে এটি es6 শ্রেণির সিনট্যাক্সের সাথে কাজ করে না।

আমি কীভাবে একই ফলাফল অর্জন করব?


সমস্যা

গৃহীত উত্তর :

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

দুর্ভাগ্যক্রমে সঠিক নয়

initialState এই initialState রেফারেন্স হিসাবে পাস করা হয়, সুতরাং আপনি যখনই state পরিবর্তন করেন initialState state পরিবর্তন initialState ( initialState এখানে আসলে কিছু যায় আসে না)। ফলস্বরূপ যে আপনি আর কখনও আর initialState যেতে পারবেন না।

সমাধান

আপনাকে initialState করতে initialState অনুলিপি করতে হবে, তারপরে এটি কার্যকর হবে। হয় নিজেই একটি গভীর অনুলিপি ফাংশন লিখুন বা এর মতো বিদ্যমান কিছু মডিউল ব্যবহার করুন।


আমার জ্ঞানের সর্বোত্তম হিসাবে, প্রতিক্রিয়াযুক্ত উপাদানগুলি প্রাথমিক অবস্থার অনুলিপি রাখে না, তাই আপনাকে এটি নিজেই করতে হবে।

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

সাবধান this.state = initialState; যে রেখাটি this.state = initialState; আপনার কখনই আপনার রাষ্ট্রকে পরিবর্তন করতে হবে না, অন্যথায় আপনি initialState দূষিত initialState এবং পুনরায় সেট করা অসম্ভব করে initialState । যদি আপনি মিউটেশনগুলি এড়াতে না পারেন, তবে আপনাকে initialState একটি অনুলিপি তৈরি করতে হবে। (অথবা getInitialState() অনুযায়ী getInitialState() initialState একটি ফাংশন তৈরি করুন getInitialState() )

অবশেষে, আমি আপনাকে setState() ব্যবহার এবং setState() পরামর্শ দেব না।


এই this.state সরাসরি this.state করার this.state আমার জন্য 16 টি প্রতিক্রিয়াতে কাজ করছে না, তাই প্রতিটি কী পুনরায় সেট করতে আমি এখানে যা করেছি:

  const initialState = { example: 'example' }
  ...
  constructor() {
      super()
      this.state = initialState
  }
  ...
  reset() {
    const keys = Object.keys(this.state)
    const stateReset = keys.reduce((acc, v) => ({ ...acc, [v]: undefined }), {})
    this.setState({ ...stateReset, ...initialState })
  }

এইভাবে আমি এটি পরিচালনা করি:

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this._initState = {
        a: 1,
        b: 2
      }
    this.state = this._initState;
  }

  _resetState(){
     this.setState(this._initState);
   }
}

আপডেট: আসলে এটি ভুল। ভবিষ্যতের পাঠকদের জন্য দয়া করে @ র্যাপটাক্স উত্তরটি দেখুন। এছাড়াও, আপনি রেফারেন্স অ্যাসাইনমেন্ট দ্বারা সৃষ্ট অদ্ভুত অবস্থা পরিবর্তন রোধ করতে একটি অপরিবর্তনীয় গ্রন্থাগার ব্যবহার করতে পারেন।


কিছু পরিস্থিতিতে, এটি কেবলমাত্র state সমস্ত মানকে বাতিল করতে যথেষ্ট।

আপনার রাষ্ট্র যদি এমনভাবে আপডেট হয়, যাতে সেখানে কী থাকতে পারে তা আপনি জানেন না, আপনি ব্যবহার করতে চাইতে পারেন

this.setState(Object.assign(...Object.keys(this.state).map(k => ({[k]: null}))))

যা নিম্নলিখিত হিসাবে রাষ্ট্র পরিবর্তন করবে

{foo: 1, bar: 2, spam: "whatever"} > {foo: null, bar: null, spam: null}

সব ক্ষেত্রেই সমাধান নয়, তবে আমার পক্ষে ভাল কাজ করে।


প্রথমত, উপাদান লাইফসাইকেল থেকে componentWillMount() ফাংশনটি ব্যবহার করার সময় আপনাকে আপনার প্রাথমিক অবস্থা সঞ্চয় করতে হবে:

componentWillMount() {
    this.initialState = this.state
}

এটি আপনার প্রাথমিক অবস্থা সঞ্চয় করে এবং যখনই কল করে আপনার প্রয়োজন তখন রাজ্যটিকে পুনরায় সেট করতে ব্যবহার করা যেতে পারে

this.setState(this.initialState)

class x extends Components {
constructor() {
 super();
 this.state = {

  name: 'mark',
  age: 32,
  isAdmin: true,
  hits: 0,

  // since this.state is an object
  // simply add a method..

  resetSelectively() {
         //i don't want to reset both name and age
    // THIS IS FOR TRANSPARENCY. You don't need to code for name and age
    // it will assume the values in default..
    // this.name = this.name;   //which means the current state.
    // this.age = this.age;


    // do reset isAdmin and hits(suppose this.state.hits is 100 now)

    isAdmin = false;
    hits = 0;
  }// resetSelectively..

}//constructor..

/* now from any function i can just call */
myfunction() {
  /**
   * this function code..
   */
   resetValues();

}// myfunction..

resetValues() {
  this.state.resetSelectively();
}//resetValues

/////
//finally you can reset the values in constructor selectively at any point

...rest of the class..

}//class

const initialState = {
    a: '',
    b: '',
    c: ''
};

class ExampleComponent extends Component {
    state = { ...initialState } // use spread operator to avoid mutation
    handleReset = this.handleReset.bind(this);

    handleReset() {
         this.setState(initialState);
    }
 }

মনে রাখবেন যে রাষ্ট্রটি পুনরায় সেট করতে সক্ষম হওয়ার জন্য প্রাথমিক স্টেটকে পরিবর্তন করতে হবে না।

state = {...initialState} // GOOD 
// => state points to a new obj in memory which has the values of initialState

state = initialState // BAD 
// => they point to the same obj in memory

সবচেয়ে সুবিধাজনক উপায় হ'ল ইএস 6 স্প্রেড অপারেটর ব্যবহার করা। তবে আপনি এর পরিবর্তে অবজেক্ট.সেসাইনও ব্যবহার করতে পারেন। তারা উভয় একই অর্জন করবে।

state = Object.assign({}, initialState); // GOOD
state = {...initialState}; // GOOD




reactjs