मैं एक प्रतिक्रिया परियोजना बना रहा हूं और डेटा लोडिंग के दौरान मुझे अपने डेटा को जेसन से लाने के साथ लेने की आवश्यकता है। लेकिन जब मैं इसे पहले खाली सरणी भेज रहा हूं तो 1-2 सेकेंड बाद में मुझे डेटा भेज रहा है। इसलिए जब इसका खाली डेटा मेरा रेंडर शुरू हो रहा है तो मेरा एप्लिकेशन क्रैश हो रहा है। खाली डेटा प्राप्त किए बिना मैं इसे कैसे बना सकता हूं? मेरे कोड:

const { id } = useParams();
  const [articles, setArticles] = useState([]);
  const [collection, setCollection] = useState([]);

 

     useEffect(() => {
        fetch("http://localhost:3001/api/v1/article/bycollection/" + `${id}`)
          .then((x) => x.json())
          .then((z) => {
            setArticles(z);
          }, []);
        fetch("http://localhost:3001/api/v1/collection/" + `${id}`)
          .then((x) => x.json())
          .then((z) => {
            setCollection(z);
          }, []);
      }, [id]);

खाली त्रुटि रेखा:

return ( 
      <div className="tomiddle ">
          <div className="mb-3">
            <BreadCrumbComp data={breadCrumbData} />
          </div>
    
          <div className="collectionBg">
            <div className="collectionHeader flex">
              <div className="w-32 h-32 p-4 mt-2 text-5xl">
                <i className={collection.icon}></i>
              </div>
              <div>
                <h1 className="collectionTitle ">{collection.name}</h1>
                <WriterGroupInfo groupData={collection} /> // Here i getting error. 
                      Its sending empty collection
              </div>
            </div>)

राइटरग्रुपइन्फो:

const WriterGroupInfo = (props) => {
  const prop = props.groupData;
  console.log("prop=>", props); // Showing empty array.
  const articles = prop.articles.slice(0, 3);
  const last = articles[articles.length - 1];
  const lastAuthor = articles.length > 1 ? " ve " + last.author.name : "";

  const authorNames =
    articles
      .slice(0, 2)
      .map((a) => a.author.name)
      .join(", ") + lastAuthor;

  return (
    
    <div className="flex  pt-4  ">
      <Avatar.Group>
        {articles.map((x) => (
          <Avatar key={x.id} src={x.author.avatar} />
        ))}
      </Avatar.Group>
      <div className="text-collection-small-500 truncate text-xs pl-2 pt-1">
        <span>Bu koleksiyonda {prop.articles.length} makale mevcut</span>
        <br />

        {articles.length > 0 ? (
          <span className="truncate mr-2">
            <span className="text-gray-400 ">Yazarlar: </span>
            {authorNames}
          </span>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};
-1
Uğurcan Uçar 12 जुलाई 2021, 16:23

3 जवाब

सबसे बढ़िया उत्तर

ऐसा इसलिए हो रहा है क्योंकि आप खाली सरणी के रूप में संग्रह का पहला मान सेट कर रहे हैं:

const [collection, setCollection] = useState([]);

आपको इस तरह की स्थितियों को संभालना चाहिए:

return ( 
  <div className="tomiddle ">
      <div className="mb-3">
        <BreadCrumbComp data={breadCrumbData} />
      </div>
     {collection.length === 0 ?
      <div> No data for collection </div> :
      <div className="collectionBg">
        <div className="collectionHeader flex">
          <div className="w-32 h-32 p-4 mt-2 text-5xl">
            <i className={collection.icon}></i>
          </div>
          <div>
            <h1 className="collectionTitle ">{collection.name}</h1>
            <WriterGroupInfo groupData={collection} /> // Here i getting error. 
                  Its sending empty collection
          </div>
        }
        </div>)
1
Martin Gainza Koulaksezian 12 जुलाई 2021, 13:31

उपयोग के अंदर आपके कॉलबैक में 2 एसिंक कॉल हैं और आप उनके समाप्त होने की प्रतीक्षा नहीं कर रहे हैं। वे अपना समय लेते हैं। इससे पहले अगला रेंडर पहले ही हो चुका है और इस कारण से आपके पास कुछ समय के लिए आपका डेटा खाली रहता है जब तक कि आपका फ़ेच (और बाद में setState) पूरा नहीं हो जाता। चूंकि दोनों फ़ेच स्वतंत्र हैं, आप Promise.all और await का उपयोग करके उनके लिए प्रतीक्षा कर सकते हैं।

useEffect( () => { 
async yourFunction() {
let promise1 = fetch("http://localhost:3001/api/v1/article/bycollection/" + `${id}`).then((x) => x.json()).then((z) => {
            setArticles(z);
          });
let promise2 = fetch("http://localhost:3001/api/v1/collection/" + `${id}`).then((x) => x.json())
          .then((z) => {
            setCollection(z);
          });

let results = await Promise.all([promise1,promise2]);
}
yourFunction();

}, [id]);

साथ ही, मेरी राय में [] दूसरे then() के लिए एक अतिरिक्त पैरामीटर के रूप में आवश्यक नहीं है।

0
Tushar Shahi 12 जुलाई 2021, 13:35

मुद्दा यह है कि UseEffect अतुल्यकालिक रूप से काम करता है और यह प्रारंभिक रेंडर के बाद ट्रिगर होता है। तो प्रारंभिक रेंडर पर, यह शून्य/खाली सरणी मानों का उपयोग करके पॉप्युलेट करने का प्रयास करता है। आप useState जैसे const[value,setValue]=useState([]) का उपयोग करके पासिंग सरणी मान आरंभ कर सकते हैं।

0
Lahiru Lanka Rathnayaka 12 जुलाई 2021, 13:43