javascript - node - react js tutorial



ReactJS মধ্যে রাষ্ট্র অ্যারে সঠিক সংশোধন (5)

আমি একটি state অ্যারে শেষে একটি উপাদান যোগ করতে চান, এটা কি এটা সঠিক উপায়?

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

আমি উদ্বিগ্ন যে push দিয়ে অ্যারে সংশোধন করা সমস্যার কারণ হতে পারে - এটি কি নিরাপদ?

অ্যারে একটি অনুলিপি তৈরীর বিকল্প, এবং setState ing যে setState মনে হয়।

https://src-bin.com


Answer #1

@ এনলগুন মন্তব্যে উল্লেখ করেছেন, আপনি প্রতিক্রিয়া নিরপেক্ষতা সহায়কদের ব্যবহার করতে পারেন। আমি এই সুপার দরকারী হতে পেয়েছি।

ডক্স থেকে:

সহজ ধাক্কা

var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

প্রাথমিক Array এখনও [1, 2, 3]।


Answer #2

আপনি এই পদ্ধতি ব্যবহার করতে পারেন : [অ্যারে destructuring]

this.setState(prevState => {
    return {
        arrayData: [...prevState.arrayData, newElement]
    }
});

প্রতিক্রিয়া ডক্স: এই mutate কখনও না। সরাসরি স্ট্যাট। হেলসিংয়ের মত তার উত্তরে ব্যাখ্যা করেছেন : সেটস্টেট () কে কল করার পরে আপনি যে মিউটেশন করেছেন তা প্রতিস্থাপন করতে পারেন। এই আচরণ করুন। স্ট্যাট হিসাবে এটি অপরিবর্তনীয় ছিল।


Answer #3

এই কোডটি আমার জন্য কাজ করে:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
    this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
  })

Answer #4

প্রতিক্রিয়া আপডেটগুলি ব্যাচ করতে পারে এবং অতএব সঠিক পদ্ধতিটি সেটআপকে একটি ফাংশন প্রদান করে যা আপডেটটি সম্পাদন করে।

প্রতিক্রিয়া আপডেট অ্যাডন জন্য, নিম্নলিখিত নির্ভরযোগ্যভাবে কাজ করবে:

this.setState( (state) => update(state, {array: {$push: [4]}}) );

বা concat জন্য ():

this.setState( (state) => {
    state.array = state.array.concat([4]);
    return state;
});

নিম্নলিখিতটি দেখায় https://jsbin.com/mofekakuqi/7/edit?js,output যদি এটি ভুল হয় তবে কী হবে তা উদাহরণস্বরূপ।

SetTimeout () আমন্ত্রণ সঠিকভাবে তিনটি আইটেম যোগ করে কারণ React একটি সেটটাইম কলব্যাকের মধ্যে আপডেটগুলি ব্যাচ করবে না ( https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ )।

Buggy onClick শুধুমাত্র "তৃতীয়" যোগ করবে, কিন্তু নির্দিষ্ট একটি, প্রত্যাশিত হিসাবে F, S এবং T যোগ করবে।

class List extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    }

    setTimeout(this.addSome, 500);
  }

  addSome = () => {
      this.setState(
        update(this.state, {array: {$push: ["First"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Second"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Third"]}}));
    };

  addSomeFixed = () => {
      this.setState( (state) => 
        update(state, {array: {$push: ["F"]}}));
      this.setState( (state) => 
        update(state, {array: {$push: ["S"]}}));
      this.setState( (state) => 
        update(state, {array: {$push: ["T"]}}));
    };



  render() {

    const list = this.state.array.map((item, i) => {
      return <li key={i}>{item}</li>
    });
       console.log(this.state);

    return (
      <div className='list'>
        <button onClick={this.addSome}>add three</button>
        <button onClick={this.addSomeFixed}>add three (fixed)</button>
        <ul>
        {list}
        </ul>
      </div>
    );
  }
};


ReactDOM.render(<List />, document.getElementById('app'));

Answer #5

ES6 সঙ্গে সহজতম উপায়:

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))





reactjs