2017-12-31 108 views
0

私は私のMobxストアの下のフェッチ要求があります。私は以下のReactJSクラスでこれを使用していますにconsole.logプリントがreactjs/mobxプロジェクトでは動作しません

getAllLegoParts = action("get all lego",() => { 
this.legoParts = fromPromise(
    fetch("http://localhost:8000/LegoPieces", { 
    method: "GET", 
    cache: "no-store" 
    }).then(response => response.json()) 
); 
}); 
} 

を二回

  1. CONSOLE.LOGプリント - 未定義の印刷物であるケースでは、第二に:

    class ViewLegos extends Component { 
    constructor(props) { 
    super(props); 
    this.props.store.getAllLegoParts(); 
    } 
    
    render() { 
    console.log(this.props.store.legoParts.value); 
    return (
        <div> 
        <table> 
         <thead> 
         <tr> 
          <th>Piece</th> 
          <th>Type</th> 
         </tr> 
         </thead> 
         <tbody> 
         {this.props.store.legoParts.map(legoPart => (
          <tr key={legoPart.id}> 
          <td>{legoPart.piece}</td> 
          <td>{legoPart.piece}</td> 
          <td>{legoPart.type}</td> 
          </tr> 
         ))} 
         </tbody> 
        </table> 
        </div> 
    ); 
    } 
    } 
    
    export default inject("store")(observer(ViewLegos)); 
    

    は、しかし、私は2つの問題を抱えていますオブジェクトの配列を出力します(これは私が望むものです)。

  2. 私はというエラーを取得:

    TypeError: this.props.store.legoParts.map is not a function 
    

グレイトフルあなたの助け!

+0

問題を[codesandbox](https://codesandbox.io/s/new)に示す機能的な例を投稿してください。詳細については、[最小限で完全で検証可能なサンプルの作成方法](http://stackoverflow.com/help/mcve)を参照してください。 –

答えて

0

表示データを取得する前にコンポーネントがマウントされるまで待つことはできますか?ここに役立つかもしれないいくつかの擬似コードです:

class ViewLegos extends Component { 

    componentDidMount() { fetchLegos() } 

    render() { 
    const allowRender = this.props.store.legoParts && this.props.store.legoParts.length 

    if (allowRender) { 
     // display lego data 
    } 

    return null 
    } 

} 

をこの例では、コンポーネントは、マウントデータをフェッチするのを待ち、それが存在する場合にのみ、それを表示します。

あなたのコードを見てみると、legoPartsがまだ定義されていないときは、より防衛的でコンポーネントの表示を処理する必要があるようです。レンダリングの前に非同期フェッチが完了しないため、最初は定義されません。

関連する問題