मैं जीआईएफ एपीआई से ऑनक्लिक पर यादृच्छिक जीआईएफ प्रदर्शित करने की कोशिश कर रहा हूं, लेकिन मुझे एक त्रुटि मिल रही है:
'अपरिभाषित की संपत्ति' छवियों को नहीं पढ़ सकता'
छवियों के लिए यूआरएल प्राप्त करने का प्रयास करते समय।
इसके अतिरिक्त, मैंने प्रत्येक क्लिक पर यादृच्छिक GIF प्राप्त करने के लिए एक handleClick
फ़ंक्शन बनाया है।
Main.js
const Main = () => {
const [data, setData] = useState([])
useEffect(() => {
fetch('https://api.giphy.com/v1/gifs/trending?&limit=9&api_key=aIINKf0Pxb8MDhC2QPzTLbgvUXN6Uz7l')
.then(response => response.json())
.then(responseData => setData(responseData.data))
.catch(error => {
console.log('Error fetching and parsing data', error)
})
},[])
return(
<div className="main hide">
<GifList data={data} />
</div>
)
}
export default Main
GifList.js
import Gif from './Gif'
const GifList = (props) => {
let results = props.data
let gif
const pickRandomGif = () =>{
let randomGifs = []
for(let i=0; i<9; i++){
let randomNumber = Math.floor(Math.random() * results.length)
randomGifs.push(randomNumber)
}
gif = randomGifs.map(random =>
<Gif url={!results ? 'Loading...' : `${results[random].images.fixed_height.url}`}
key={random.id} />
)
}
const handleClick = (e) =>{
e.preventDefault()
pickRandomGif()
}
return (
<div>
<ul className="gif-list">
{gif}
</ul>
<button className="btn" onClick={handleClick}>Click here</button>
</div>
)
}
export default GifList
Gif.js
const Gif = (props) => {
return (
<li className="gif-wrap">
<img src={props.url} alt=""/>
</li>
)
}
export default Gif;
1 उत्तर
जब डेटा लोड हो रहा होता है, data
(और इस प्रकार परिणाम
) एक खाली सरणी है। आपके GifList
में, जब डेटा खाली होता है randomNumber
हमेशा 0 के बराबर होता है। फिर, जब आप randomGifs
सरणी को मैप करते हैं, तो आप तक पहुंचने की कोशिश करते हैं results[0]
, जो कि अपरिभाषित
है, क्योंकि परिणाम खाली हैं। यह त्रुटि का कारण बनता है, क्योंकि अपरिभाषित
संपत्ति छवियों
के साथ एक वस्तु नहीं है।
समस्या को हल करने के लिए आपको एक चेक जोड़ना चाहिए कि क्या results
खाली है (या results[random]
undefined
है)।
results[random]
को प्रारंभ करने का प्रयास किया और यह काम कर गया। यह जांचने की आवश्यकता नहीं है कि यह अपरिभाषित है या नहीं। क्या यह सही तरीका होगा क्योंकि अब मुझे कोई त्रुटि नहीं मिल रही है?