जब मैं एक राउटर में प्रवेश करता हूं जो इस घटक को संदर्भित करता है, तो मेरा ब्राउज़र बस क्रैश हो जाता है। मैंने कुछ कंसोल परीक्षण किए हैं और नोटिस किया है कि जब response.data.message ऊपर होता है, तो यह लगातार पृष्ठ को फिर से प्रस्तुत करता है। क्या कोई मेरी मदत कर सकता है?

import React from 'react'
import "./UsernameStory.css";
import Axios from "axios";




const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    const fetchUsername = () => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/"+urls, {

        }).then((response) => {
            if(response.data.statue)
            {
                setStatue(response.data.statue);
            }
            if(response.data.message){
                setStories(response.data.message);
            }
        })
    }


    return (
        <div>
            {fetchUsername()}
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory
0
MH15O 12 जुलाई 2021, 19:45

3 जवाब

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

प्रत्येक रेंडर पर, fetchUsername() को कॉल किया जाता है और इसके परिणामस्वरूप statue और stories को अपडेट किया जाता है, जिसके परिणामस्वरूप एक और रेंडर होता है, और इस तरह से रीरेंडरिंग का एक अनंत लूप होता है (क्योंकि प्रत्येक रेंडर एक स्टेट अपडेट को ट्रिगर करता है )

डेटा प्राप्त करने जैसे दुष्प्रभावों वाले कार्यों को संभालने के लिए एक बेहतर अभ्यास fetchUsername को useEffect में रखना है।

const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    useEffect(() => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/"+urls, {})
            .then((response) => {
                if(response.data.statue)
                {
                    setStatue(response.data.statue);
                }
                if(response.data.message){
                    setStories(response.data.message);
                }
            });
    }, []); // An empty denpendency array allows you to fetch the data once on mount


    return (
        <div>
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory
0
PIG208 12 जुलाई 2021, 17:04
  1. आप रिटर्न स्टेटमेंट के अंदर फ़ंक्शन fetchUsername() को कॉल नहीं कर सकते। यह अनंत लूप में जाएगा।
  2. आप सीधे दो चर की स्थिति को सेटस्टैच्यू (response.data.statue) और setStories(response.data.message) के रूप में सेट नहीं कर सकते हैं।
  3. उपयोग प्रभाव हुक का उपयोग करें और लूपिंग से बचने के लिए सशर्त प्रतिपादन के साथ उस हुक के अंदर स्थिति सेट करें।
  4. वापसी विवरण से ठीक पहले fetchUsername() को कॉल करें।
0
Amit Maurya 12 जुलाई 2021, 17:02

इसके बजाय useEffect हुक के साथ fetchUsername() फ़ंक्शन को कॉल करने के तरीके को बदलने का प्रयास कैसे करें?

import React, { useEffect } from 'react'
import "./UsernameStory.css";
import Axios from "axios";


const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    useEffect(() => {
        const fetchUsername = () => {
            const urls = match.params.username;
            Axios.post("http://localhost:8080/"+urls, {

            }).then((response) => {
                if(response.data.statue)
                {
                    setStatue(response.data.statue);
                }
                if(response.data.message){
                    setStories(response.data.message);
                }
            })
        }

        fetchUsername();

        // clean up here 
        return () => {
            // something you wanna do when this component being unmounted
            // console.log('unmounted')
        }
    }, [])


    return (
        <div> 
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory

लेकिन, कभी-कभी कुछ परिदृश्यों में आपके कोड को क्लीनअप की आवश्यकता नहीं होती है, आप इसके बारे में यहां अधिक पढ़ सकते हैं: प्रभाव हुक का उपयोग करना - प्रतिक्रिया दस्तावेज़ीकरण

0
Richie Permana 12 जुलाई 2021, 17:23