প্রতিক্রিয়া হুকগুলিতে পদ্ধতিটি ধাক্কা (ব্যবহারের স্টেট)?

Question 1

কিভাবে ব্যবহারকারীর স্টোর অ্যারে প্রতিক্রিয়া হুক ভিতরে উপাদান পুশ? প্রতিক্রিয়া অবস্থায় কি এটি কোনও পুরানো পদ্ধতি হিসাবে? নাকি নতুন কিছু?

যেমন সেটস্টেট ধাক্কা উদাহরণ ?

Question 2

আপনি যখন ব্যবহার করবেন useState, আপনি রাষ্ট্র আইটেমটির জন্য একটি আপডেট পদ্ধতি পেতে পারেন:

const [theArray, setTheArray] = useState(initialArray);

তারপরে, আপনি যখন কোনও নতুন উপাদান যুক্ত করতে চান, আপনি সেই ফাংশনটি ব্যবহার করুন এবং নতুন অ্যারে বা একটি ফাংশন যা নতুন অ্যারে তৈরি করবে তা পাস করুন। সাধারণত পরবর্তীকালে, যেহেতু রাষ্ট্রীয় আপডেটগুলি অ্যাসিনক্রোনাস এবং কখনও কখনও ব্যাচ হয়:

setTheArray(oldArray => [...oldArray, newElement]);

কখনও কখনও আপনি, যে কলব্যাক ফর্ম ব্যবহার না করেই পার পেয়ে যাবে যদি আপনি শুধুমাত্র মত নির্দিষ্ট নির্দিষ্ট ব্যবহারকারীর ইভেন্টের জন্য হ্যান্ডেলার অ্যারের আপডেট click(কিন্তু মত নয় mousemove):

setTheArray([...theArray, newElement]);

যে ইভেন্টগুলির জন্য প্রতিক্রিয়াটি নিশ্চিত করে যে রেন্ডারিং ফ্লাশ হয়েছে তা হ'ল এখানে তালিকাভুক্ত "বিচ্ছিন্ন ঘটনা" ।

সরাসরি উদাহরণ (এতে একটি কলব্যাক পাস করা setTheArray):

কোড স্নিপেট দেখান

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

স্নিপেট প্রসারিত করুন

যেহেতু কেবলমাত্র একমাত্র আপডেটটি theArrayএকটি clickইভেন্টে ("বিযুক্ত" ইভেন্টগুলির মধ্যে একটি) রয়েছে তাই আমি সরাসরি আপডেট নিয়ে পালাতে পারলাম addEntry:

কোড স্নিপেট দেখান

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

স্নিপেট প্রসারিত করুন

Question 3

আরও কিছুটা প্রসারিত করার জন্য, এখানে কয়েকটি সাধারণ উদাহরণ দেওয়া হল। দিয়ে শুরু:

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

অ্যারের শেষে উপাদানটি পুশ করুন

setTheArray(prevArray => [...prevArray, newValue])

অবজেক্টের শেষে এলিমেন্টটি পুশ / আপডেট করুন

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

অবজেক্টের অ্যারের শেষে উপাদানটি পুশ / আপডেট করুন

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

অ্যারের অবজেক্টের শেষে উপাদানটি পুশ করুন

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

এখানে কিছু কার্যকারী উদাহরণ রয়েছে। https://codesandbox.io/s/reacthooks-push-r991u

Question 4

প্রতিক্রিয়া শ্রেণীর উপাদানগুলিতে আপনি "স্বাভাবিক" অবস্থার সাথে একইভাবে করেন।

উদাহরণ:

function App() {
  const [state, setState] = useState([]);

  return (
    <div>
      <p>You clicked {state.join(" and ")}</p>
      //destructuring
      <button onClick={() => setState([...state, "again"])}>Click me</button>
      //old way
      <button onClick={() => setState(state.concat("again"))}>Click me</button>
    </div>
  );
}

Question 5

// Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

Question 6

setTheArray([...theArray, newElement]);সহজ উত্তর কিন্তু অ্যারে আইটেমগুলির রূপান্তর জন্য সতর্কতা অবলম্বন করুন । অ্যারে আইটেমগুলির গভীর ক্লোনিং ব্যবহার করুন।

Question 7

সর্বাধিক প্রস্তাবিত পদ্ধতি হ'ল মোড়ক ফাংশন এবং স্প্রেড অপারেটর একসাথে ব্যবহার করা। উদাহরণস্বরূপ, আপনি যদি nameএই জাতীয় নামে পরিচিত রাষ্ট্র শুরু করে থাকেন ,

const [names, setNames] = useState([])

আপনি এই অ্যারেতে এভাবে চাপ দিতে পারেন,

setNames(names => [...names, newName])

আশা করি এইটি কাজ করবে.