Reagieren - Eigenschaft 'secure_url' von undefined kann nicht gelesen werden

Question

Ich versuche, einen Ort zum Hochladen von Bildern mit Cloudinary zu erstellen, funktioniert alles ok, aber ich bin mir nicht sicher, wie überprüft werden, ob Bilder im Zustand sind, weil ich bin bekommen:

SECURE_URL ‚Kann Eigenschaft nicht lesen‚‘undefinierten‘

SECURE_URL ist eine Eigenschaft mit einer Bild-uRL auf dem Objekt von cloudinary zurückgegeben.

Staat

this.state = { 
      toDo: [], 
      loggedIn: false, 
      images: [] 
     } 

ComponentDidMount (Uploaded image) 

    componentDidMount() { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 
      let userId = firebase.auth().currentUser.uid; 

      let dbRef = firebase.database().ref(`notes`); 
      dbRef.on("value", (dataObj) => { 
       let toDoArr = []; 
       let imagesArr = []; 
       let dataObjValue = dataObj.val(); 
       let displayName = user.displayName; 
       for(var prop in dataObjValue) { 
        let uploadedImage = dataObjValue[prop][0]; 
        dataObjValue[prop].key = prop; 
        dataObjValue[prop].displayName = user.displayName; 
        toDoArr.push(dataObjValue[prop]); 
        imagesArr.push(uploadedImage); 
       } 

       this.setState({ 
        toDo: toDoArr 
       }); 

       this.setState({ 
        loggedIn: true 
       }) 

       this.setState({ 
        images: imagesArr 
       }) 
      }); 
     } else { 
      this.setState({ 
       loggedIn: false 
      }) 
     } 
    }) 
} 

Bild hochladen Methode

imageUpload(files) { 
     const image = files[0]; 
     const cloudName = 'xxxx'; 
     const url = 'https://api.cloudinary.com/v1_1/'+cloudName+'/image/upload'; 
     const timestamp = Date.now()/1000; 
     const uploadPreset = 'xxxx'; 
     const paramsStr = 'timestamp='+timestamp+'&upload_preset='+uploadPreset+'xxxxx'; 
     const signature = sha1(paramsStr); 
     const params = { 
      'api_key': xxxxx, 
      'timestamp': timestamp, 
      'upload_preset': uploadPreset, 
      'signature': signature 
     } 

     let uploadRequest = superagent.post(url); 
     uploadRequest.attach('file', image); 

     for(let key in params) { 
      uploadRequest.field(key, params[key]); 
     } 

     uploadRequest.end((err, res) => { 
      if(err) { 
       alert(err); 
      } 

      const uploaded = res.body; 

      let imagesArr = []; 

      let userId = firebase.auth().currentUser.uid; 
      const dbRef = firebase.database().ref(`notes`); 

      if(imagesArr.length === 0) { 
       imagesArr.push(uploaded); 
       dbRef.push(imagesArr); 
      } 

      if(imagesArr.length >= 1) { 
       imagesArr.splice(0, uploaded); 
       dbRef.remove(); 
       dbRef.push(imagesArr); 
      } 
     }); 
    } 

Karte durch Array

uploadedImage = (
     this.state.images.map((image, i) => { 
      return (
       <img className="avatar" key={`image-${i}`} src={image.secure_url} alt={image.orginal_filename}/> 
      ); 
     }) 
    ); 

Answer 1

Hier ist der Fehler

lassen uploadedImage = dataObjValue [Prop] [0]

Einige oder alle von diesem Code zurückgegebenen Elemente sind nicht definiert. Es gibt keine Magie in der Reaktion. Versuchen Sie, alle Bilder zu protokollieren und prüfen, welche

Am Ende ist nicht definiert Sie undefined drücken, um Bilder Array