렌딩 요소 (중포 기지 저장)

Question

작품 반응 :

render() { 

    const storageRef = firebase.storage().ref(); 


    const nice = Object.keys(this.state.photos).map((key) => { 
     return <div>{key}</div>;   
    }); 


return(
    {nice} 
) 

가 작동하지 않습니다 :

render() { 

    const storageRef = firebase.storage().ref(); 


    const nice = Object.keys(this.state.photos).map((key) => { 
     storageRef.child('front.jpg').getDownloadURL().then(function(url) { 
      return <div><img src={url} /></div>;   
     )} 
    }); 


return(
    {nice} 
) 

.then 물건 반작용의 렌더링을 깰 것으로 보인다. 콘솔에서 모두 nice이 적절하고 적절하지만 DOM에는 아무 것도 나오지 않습니다. 코드의 개념은 이미지의 이름을 (Firebase Storage의 이미지를 참조하는) state에 저장 한 다음 getDownloadURL을 사용하여 URL을 가져온 후에 각 이미지를 렌더링하는 것입니다.

Answer 1

약속은 비동기. 위의 코드는 약속이 완료되기를 기다리는 동안 return ({nice})이라는 다음 줄의 코드가 반환되기 때문에 매 시간마다 {nice}를 반환합니다. render 메소드에 약속을하는 것은 일반적으로 나쁜 습관 일뿐입니다. 실제로 이상적으로, 전체 구성 요소는 순수한 함수가됩니다. 즉,받은 소품을 기반으로 렌더링되고 비동기식 물건은 다른 곳에서 처리됩니다. 예를 들어, 희귀 한 썽크 또는 무용담처럼 처리 할 수 ​​있습니다. 비트

비동기 코드를 처리하는 올바른 방법은 react의 lifecycle methods을 사용하는 것입니다. 라이프 사이클 메소드를 사용하려면 구성 요소를 React.Component를 확장하는 클래스로 정의해야합니다 (링크 참조). 비동기 코드를 실행할 때 비동기 함수 (promise)를 넣으십시오. 예를 들어, 구성 요소가 처음 렌더링 될 때마다 코드를 실행하려면 "componentWillMount"메서드를 사용하거나 아니면 예를 들어, 다음과 같습니다.

class MyComponent extends React.Component { 
    constructor(props){ 
    this.state = { 
     photoUrl: '' 
    } 
    storageRef.child('front.jpg').getDownloadURL().then(function(url) { 
     this.setState({photoUrl: url})   
    )} 
    } 

    render(){ 
    if(this.state.photoUrl){ 
     return (<div><img src={this.state.url} /></div>) 
    } else { 
     return '' //will return nothing until you actually have a url 
    } 
    } 
} 

약속은 구성 요소가 처음 렌더링 될 때 한 번만 실행됩니다. 유연성을 높이려면 라이프 사이클 방법을 확인하십시오. 사용자 상호 작용에 대한 응답으로 비동기 코드를 실행하려면 약속을 보관하고 완료 될 때 상태를 업데이트하는 자체 함수를 정의하십시오. 그런 다음 html 요소에서 다음과 같은 함수를 참조하십시오.

<input ... onClick={this.myAsyncFn.bind(this)}/> 

자, 제가 redux에 대해 말한 것과 같이 좋습니다. 지금 당장은 필요하지 않을 수도 있지만, 반응 개발의 길을 계속 따라 가면 확실히 원할 것입니다. 그리고 Firebase를 상점으로 사용하고 있다고 말하면서, redux 스토어가 사용되는 것을 완전히 이해하지 못할 수도 있습니다. 그것은 국가 관리 솔루션입니다. 왜 이걸 필요할까요? 예를 들어, 방금 가져온 URL을 다른 구성 요소에 필요로한다면 어떻게 될까요? 비동기 호출도해야합니까? 당신은 비동기 호출을하고 소품을 통해 자녀에게 URL을 전달하는 더 높은 수준의 구성 요소를 가질 수 있습니다. 그러나 이것이 앱에 실제로 이해가되지 않는다면 어떻게 될까요? 더 나아가 사용자가 해당 구성 요소가 존재하지 않는 다른 페이지로 이동해야하지만 해당 페이지에서도 URL이 필요하면 어떻게해야합니까? 다시 가져 가실 필요가 있습니까? Firebase에 대한 호출을 너무 많이하는 것은 실제로 효율적이지 않습니다. 그래서 우리가 필요로하는 모든 것을 (appIsBusy 플래그와 같은) 우리 주와 관련된 모든 것들과 우리가 작업하고있는 URL과 같은 데이터 모두 한 곳에서? 그것은 redux 가게입니다.Redux thunk 및 redux sagas는 모든 비동기 작업 (및 기타 작업이지만 현재 당장은 걱정할 필요가 없습니다)을 처리하는 방법으로, 구성 요소 외부의 방식으로 앱에서 발생할 수 있습니다. 즉, 구성 요소가 모두 소품을 가져 와서 주어진 내용을 기반으로 렌더링하는 순수한 기능 일 수 있음을 의미합니다. 그들은 비동기 적으로 아무것도 할 필요가 없으며 항상 예측 가능하게 행동 할 것입니다. 즉, redux 라이브러리 (here)를보고 응용 프로그램과 통합하는 것이 좋습니다 (어떤 일이 벌어지고 있는지 더 잘 이해하려면 react-redux 라이브러리 This is a helpful article가 필요합니다). 썽크 (thunks) 나 무용담 (sagas)에 대해서는 아직 걱정하지 마십시오. 위와 같이 라이프 사이클 메소드를 사용하여 구성 요소에 비동기 작업을 처리하십시오. 그런 다음 모든 것을 처리하면 썽크와 무용담을 조사 할 수 있습니다.

Answer 2

렌더 함수 내에서 단일 요소 래퍼를 반환해야합니다.

그래서

return (<div>{photosArray}</div>) 

당신은 또한 오타가 있어야 배열이 모두 사용된다 photosArray 및 photosarray