मैं जीआईएफ एपीआई से ऑनक्लिक पर यादृच्छिक जीआईएफ प्रदर्शित करने की कोशिश कर रहा हूं, लेकिन मुझे एक त्रुटि मिल रही है:

'अपरिभाषित की संपत्ति' छवियों को नहीं पढ़ सकता'

छवियों के लिए यूआरएल प्राप्त करने का प्रयास करते समय।

इसके अतिरिक्त, मैंने प्रत्येक क्लिक पर यादृच्छिक 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
Zaid 22 जिंदा 2021, 23:04

1 उत्तर

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

जब डेटा लोड हो रहा होता है, data (और इस प्रकार परिणाम) एक खाली सरणी है। आपके GifList में, जब डेटा खाली होता है randomNumber हमेशा 0 के बराबर होता है। फिर, जब आप randomGifs सरणी को मैप करते हैं, तो आप तक पहुंचने की कोशिश करते हैं results[0], जो कि अपरिभाषित है, क्योंकि परिणाम खाली हैं। यह त्रुटि का कारण बनता है, क्योंकि अपरिभाषित संपत्ति छवियों के साथ एक वस्तु नहीं है।

समस्या को हल करने के लिए आपको एक चेक जोड़ना चाहिए कि क्या results खाली है (या results[random] undefined है)।

0
Cirrus86 23 जिंदा 2021, 02:52
धन्यवाद, मैंने results[random] को प्रारंभ करने का प्रयास किया और यह काम कर गया। यह जांचने की आवश्यकता नहीं है कि यह अपरिभाषित है या नहीं। क्या यह सही तरीका होगा क्योंकि अब मुझे कोई त्रुटि नहीं मिल रही है?
 – 
Zaid
23 जिंदा 2021, 04:01