胸が張り裂ける要素は、（Firebaseストレージ）

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の画像を参照する）状態に格納してから、getDownloadURLを使用してURLを取得した後に各画像をレンダリングすることです。

Answer 1

約束は非同期です。上記のコードは、約束が満たされるのを待っている間に次のコード行が返されるので、毎回{nice}を返します。これは返されません（{nice}）。これは未定義です。あなたのレンダリングメソッドに約束を置くことは一般的に悪い習慣です。実際、理想的には、コンポーネント全体が純粋な関数（つまり、受け取った小道具に基づいてレンダリングされ、非同期のものは他の場所で扱われます。たとえば、還元サンクやサガなどですが、 bit。

コンポーネント内で非同期コードを処理する適切な方法は、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 
    } 
    } 
} 

プロビジョニングは、コンポーネントが最初にレンダリングされるときに1回だけ実行されます。柔軟性を高めるには、ライフサイクルの手法をチェックしてください。ユーザーの操作に応答して非同期コードを実行する場合は、完了したら約束と更新状態を格納する独自の関数を定義します。あなたのhtml要素では、そのような関数を参照してください：

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

[OK]を私は還元について言った。あなたは今それを必要としないかもしれませんが、反応開発のこの道を続けると、間違いなくそれが必要になります。 Firebaseをあなたの店舗として使っているというあなたのタイトルに基づいて、私はあなたがreduxストアが使われているものを完全に理解していないかもしれないと推測しています。これは状態管理ソリューションです。なぜあなたはこれを必要としますか？たとえば、検索したURLが別のコンポーネントに必要な場合はどうでしょうか？それも非同期の呼び出しを行う必要がありますか？あなたは、非同期呼び出しを行い、小道具を介して子にURLを渡す上位レベルのコンポーネントを持つことができますが、それが本当にあなたのアプリケーションに意味をなさない場合はどうすればよいですか？さらに、ユーザーがそのコンポーネントが存在しない別のページに移動する必要がある場合、そのURLは他のページにも必要ですか？もう一度それを取得する必要がありますか？ Firebaseへの呼び出しを非常に多くすることは効率的ではありません。したがって、私たちが必要としている状態（「appIsBusy」フラグなど）と、作業中のURLのようなデータすべて1か所で？それが還元店です。Redux thunkとredux sagasは、あなたのコンポーネントの外部にある方法であなたのアプリで起こる可能性があるすべての非同期の事柄（およびその他のものですが、今は心配しないでください）を処理する方法です。つまり、コンポーネントはすべて、小道具を取って与えられたものに基づいてレンダリングする純粋な関数であることができます。それらは、非同期なものを自分自身で実行する必要はなく、常に予測可能に動作します。それでは、私のお勧めは、reduxライブラリ（here）を見て、あなたのアプリとの統合を試みることです（これについては、react-reduxライブラリThis is a helpful articleが必要です）。サンクやサガを心配する必要はありません。上記のライフサイクルメソッドを使用して、コンポーネント内の非同期コンポーネントを処理してください。そして、あなたがそのすべてを手がけたら、サンクとサガを探し始めることができます。

Answer 2

レンダー機能内で単一の要素ラッパーを返す必要があります。

だから、

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

する必要があります。また、タイプミスがあり、アレイは両方として使用されます。photosArrayとphotosarrayは