javascript - उपयोग सेट सेट विधि तुरंत परिवर्तन को प्रतिबिंबित नहीं करती है



reactjs react-hooks (1)

मैं हुक सीखने की कोशिश कर रहा हूं और उपयोग विधि ने मुझे भ्रमित कर दिया है। मैं एक सरणी के रूप में एक राज्य के लिए प्रारंभिक मूल्य प्रदान कर रहा हूं। UseState में सेट विधि मेरे लिए spread(...) या without spread operator भी काम नहीं कर रही है। मैंने एक और पीसी पर एक एपीआई बनाया है जिसे मैं कॉल कर रहा हूं और उस डेटा को प्राप्त कर रहा हूं जिसे मैं राज्य में स्थापित करना चाहता हूं।

यहाँ मेरा कोड है:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    {
      category: "",
      photo: "",
      description: "",
      id: 0,
      name: "",
      rating: 0
    }
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {
        //const response = await fetch(
        //`http://192.168.1.164:5000/movies/display`
        //);
        //const json = await response.json();
        //const result = json.data.result;
        const result = [
          {
            category: "cat1",
            description: "desc1",
            id: "1546514491119",
            name: "randomname2",
            photo: null,
            rating: "3"
          },
          {
            category: "cat2",
            description: "desc1",
            id: "1546837819818",
            name: "randomname1",
            rating: "5"
          }
        ];
        console.log(result);
        setMovies(result);
        console.log(movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return <p>hello</p>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

setMovies(result) साथ-साथ setMovies(...result) काम नहीं कर रहा है। यहाँ कुछ मदद का उपयोग कर सकते हैं। अग्रिम में धन्यवाद।

मुझे उम्मीद है कि परिणाम चर को फिल्मों की श्रेणी में धकेला जाएगा।


React.Component या React.PureComponent को बढ़ाकर बनाए गए क्लास घटकों में बहुत कुछ सेटस्टैट का उपयोग करता है, useState हुक द्वारा प्रदान किए गए अपडेटर का उपयोग करते हुए राज्य का अद्यतन भी अतुल्यकालिक है, और तुरंत प्रतिबिंबित नहीं करेगा और अपडेट करेगा लेकिन फिर से रेंडर करेगा।

setMovies(result);
console.log(movies) // movies here will not be updated

यदि आप राज्य अद्यतन पर कोई कार्य करना चाहते हैं, तो आपको उपयोग करने की आवश्यकता होती है, हुक का उपयोग करना, जैसे कि componentDidUpdate में घटकडाईपडेट का उपयोग करना, क्योंकि सेटर द्वारा उपयोग किए गए सेटर में कॉलबैक पैटर्न नहीं है।

useEffect(() => {
    // action on update of movies
}, [movies]);

जहां तक ​​राज्य को अद्यतन करने के लिए वाक्यविन्यास का संबंध है, setMovies(result) राज्य में पिछली movies मूल्य को बदल देगा, जो कि async अनुरोध से उपलब्ध हैं।

हालाँकि यदि आप पहले से मौजूद मानों के साथ प्रतिक्रिया को मर्ज करना चाहते हैं, तो आपको स्टेट सिचुएशन के कॉलबैक सिंटैक्स का उपयोग करना होगा, साथ ही साथ फैल सिंटैक्स का सही उपयोग करना चाहिए

setMovies(prevMovies => ([...prevMovies, ...result]));




react-hooks