が反応 - （トライキャッチ内からJSXを返す）.MAP内Catchブロックを試してみてください

Question

コードを使用することはできません以下の通りです：

return (
    <MuiThemeProvider> 
     <GridList> 

     {singleProd.map(function(product) { 
     // console.log(product) 
     let fileID; 

     try { 
      api.GetFile(product.relationships.main_image.data.id) 

      .then((file) => { 
      fileID = file.data.link.href; 
      console.log(fileID) 

      return (
       <Tile name={product.name} id={product.id} link={fileID} key={product.id} /> 
      ) 

      }) 
     } 

     catch(e){ 
      console.log('product has no main image'); 

      return (
       <Tile name={product.name} id={product.id} link={fileID} key={product.id} /> 
     ) 
     } 

     })} 
     </GridList> 
    </MuiThemeProvider> 
    ) 

エラーは次のとおりです。Cannot read property '_currentElement' of null

診断は、これまでのところです戻り値はそれぞれtry catchブロックでそれぞれラップされるため、.map関数では何も返されません。

try catchの外側にリターンを追加すると、それは成功します。

.map内の各オブジェクトがtryキャッチで実行されるように、どのようにフォーマットする必要があるのだろうか。試行が成功すると、そのjsxが返されて使用されます。そうでなければ、catch jsxが返され、使用されます。

上記のコードをどのように再構築するかについてのご意見はありますか？

その他の関連情報：オブジェクトの配列を返す外部API呼び出しを使用して材料UIタイル

を用い

• 、したがってマップ
• 各オブジェクトのタイルが返されるとの一部となるのグリッドリスト。

Answer 1

try/catchは本当にここでは問題ではありません。考慮する必要があるもの：

1. レンダリング機能内でAPI呼び出しを行うべきではありません。これにより、コンポーネントがいつでも再レンダリングされるたびに、複数回要求されます。
2. API呼び出しが非同期であるため、必要なデータを取得するために応答を待つ必要があります。

.mapには、要求が完了するまでデータがないため、非同期ビットは私が信じている現在のエラーの原因です。

- あなたは何をすべき

です：

1. は、あなたのコンポーネントの状態に応じてデータを設定し、その結果をレンダリングするためにcomponentDidMount
2. 使用setStateからAPIを呼び出します。

reduxのようなものを使用すると、アプリケーションの状態を維持することができます。