Firebase Storage에서 사진을 불러 와서

Question

Firebase Storage에서 이미지 URL을 검색하고 해당 URL로 이미지를 설정하려고합니다.

이 내가 중포 기지 저장 장치에서 검색 할 수 사용하고 내 기능이

import {Firebase, 
     FirebaseAuth, 
     FirebaseDatabase, 
     FirebaseStorage} from '../Initialize' 

export function getProfilePictureUrl(uid, callback, onErrorCallback) { 
    var pathReference = FirebaseStorage.ref('profiles/' + uid + '/profilePicture.jpeg'); 

    pathReference.getDownloadURL().then((url) => { 
     callback(url); 
    }).catch((error) => { 
     onErrorCallback(error); 
    }); 
} 

내가 구성 부품 반작용에서 호출 : 그러나, 내 현재 코드로 정의되지 않은 값으로 SRC를 설정하고 보인다

render() { 
    let profilePictureUrl = getProfilePictureUrl(uid, (url) => { 
     console.log(url); // The console.log(url) returns a valid and working url for the image. So I know my imports are correct 
     return url; 
    }, 
    (error) => { 
     console.log(error.code); 
     return ""; 
    }) 
    return (
     <img 
      src={profilePictureUrl} 
     /> 
    ); 
} 

ProfilePictureUrl이 정의되지 않은 이미지이므로 제대로로드되지 않습니다.

I의이()와 테스터 내부 렌더링 만들려고 사용했을

render() { 
    if(profilePictureUrl !== undefined) { 
      console.log("defined"); 
    } 
    else { 
     console.log("undefined"); 
    } 
    // returns 'undefined' 
} 

그리고 함수가 정의되지 않은 값을 리턴하는 것을 나타내는 다른 응답을 기록되고 있었다. Firebase의 비동기 성질과 관련이 있다는 의심이 들지만, 어떻게 해결해야할지 모르겠다. 구글을 통해 찾을 수 React-Native: Download Image from Firebase Storage

Answer 1

이와 경우 다른 사람도 그것을 발견에 대답하기로 결정

이 질문에

는 관련이있을 수 있습니다.

약속이 해결 될 때 React가 구성 요소를 업데이트하지 않기 때문에 예제가 작동하지 않습니다. 즉, 이미지 URL은 undefined입니다.

이 문제를 해결하려면 약속에서 this.setState()으로 전화하거나 (플럭스/리덕스를 사용하는 경우 작업을 보내십시오). 이렇게하면 자동으로 상태가 새 URL로 업데이트됩니다.

---

코드 예제

const config = { 
    apiKey: "apiKey", 
    authDomain: "authDomain", 
    storageBucket: "bucketURL" 
} 

firebase.initializeApp(config) 
const storage = firebase.storage().ref() 

class HelloMessage extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     lithuania: '', 
     uk: '' 
    } 

    this.getImage('lithuania') 
    this.getImage('uk') 
    } 

    getImage (image) { 
    storage.child(`${image}.png`).getDownloadURL().then((url) => { 
     this.state[image] = url 
     this.setState(this.state) 
    }) 
    } 

    render() { 
    return (
     <div> 
     Hello Lithuania<br /> 
     <img src={ this.state.lithuania } alt="Lithuanian flag" /> 
     <br /> 
     Hello United Kingdom<br /> 
     <img src={ this.state.uk } alt="UK flag" /> 
     </div> 
    ); 
    } 
} 

전체 codepen : https://codepen.io/DeividasK/pen/pRmbWq