मैं useEffect के साथ JSON सरणी के माध्यम से लूप करने का प्रयास कर रहा हूं। जब मैं निर्दिष्ट एक उपयोगकर्ता के साथ नीचे दिए गए कोड (यूजस्टेट से हटाए गए सरणी के साथ) का उपयोग करता हूं, तो मैं डेटा प्राप्त करने में सक्षम हूं। हालांकि यह पूरे सरणी के साथ काम नहीं करता...किसी भी सुझाव की सराहना की जाएगी।

function GitHubUser() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(`https://api.github.com/users/`)
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
  }, []);

  if (data) {
    return (
      <div>
        <h1>{data.userId}</h1>
        <img src={data.avatar_url} width={100} alt={"github avatar"}/>
        <p>{data.login}</p>
      </div>
    );
  }
  return null;
}
0
narwhal359 15 जिंदा 2021, 18:19

2 जवाब

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

यह काम नहीं करता क्योंकि जब आप if (data) करते हैं तो यह सच हो जाता है क्योंकि खाली सरणी true है

const data = [];
if (data) {
  console.log("Empty array is true");
} else {
  console.log("Empty array is false");
}

तो... जब आप एक खाली सरणी से userId प्राप्त करने का प्रयास करते हैं तो यह एक त्रुटि उत्पन्न करता है।

यदि डेटा को एक सरणी माना जाता है ...

function GitHubUser() {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch("https://api.github.com/users")
            .then((res) => res.json())
            .then(setData)
            .catch(console.error);
    }, []);

    if (data) {
        return (
            <React.Fragment>
                {data.map((user) => (
                    <div>
                        <h1>{user.userId}</h1>
                        <img src={user.avatar_url} width={100} alt={"github avatar"} />
                        <p>{user.login}</p>
                    </div>
                ))}
            </React.Fragment>
        );
    }
    return null;
}

आपको प्रत्येक उपयोगकर्ता को अपेक्षित आउटपुट घटक से मैप करना होगा। मानचित्र का उपयोग करने से पिछले व्यवहार को रोका जा सकेगा क्योंकि यदि सरणी में कोई तत्व मौजूद नहीं है, तो यह कुछ भी मैप नहीं करेगा और त्रुटि के बजाय एक खाली घटक लौटाएगा।

यदि डेटा को एक सरणी नहीं माना जाता है, तो आपको मानचित्र का उपयोग नहीं करना चाहिए और न ही एक खाली सरणी के साथ राज्य को प्रारंभ करना चाहिए क्योंकि fetch को चलाने से पहले यह घटक को प्रस्तुत करने और विफल होने का प्रयास करेगा।

0
luckongas 15 जिंदा 2021, 20:46

क्या यह कुछ ऐसा है जो आप चाहते हैं?

  • मैंने https://api.github.com/users*here* के बाद बैकस्लैश हटा दिया।
  • मैंने डेटा को उपयोग के हुक में सेट किया है, आपके उदाहरण में आपने ऐसा नहीं किया है।
  • और डेटा में सरणी को मैप किया, यह सभी जीथब उपयोगकर्ताओं को छवियों और नामों के साथ दिखाता है।

.

function GitHubUser() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(`https://api.github.com/users`) // removed the backslash here
      .then(res => res.json())
      .then(data => setData(data)) // changed this line
      .catch(console.error);
  }, []);

  console.log(data)


    return (
      <div>
        {data.map((item, key) => <> // Mapping through the array here
        <h1 key={key}>{item.id}</h1>
        <img src={item.avatar_url} width={100} alt={"github avatar"}/>
        <p>{item.login}</p>
        </>
        )}
      </div>
    );
  }
0
gospecomid12 15 जिंदा 2021, 20:39