React-router - リンクの発火が遅すぎる

Question

私は今すぐ反応ルータを自分のアプリケーションに組み込み始めました。それは魅力的なものです。しかし、私には小さな問題が1つあります。ある時点で、別のページに変更するボタンをクリックする必要がありますが、アクションコール（サーバーに行き、データを表に表示させる）を行う必要があります。現時点では、アクションルーターの前に反応ルータのリンクが起動しているため、マップするデータがないため、この時点でアプリケーションが中断されます。

私の質問は、ページが変更されたときに（アクションによって更新された）ストア内にデータが存在するように、これらのイベントが発生する順序を変更する方法です。

現在のコードブロック：

import React from 'react'; 
import { Link } from 'react-router'; 
import List from 'material-ui/lib/lists/list'; 
import ListItem from 'material-ui/lib/lists/list-item'; 
import ActionInfo from 'material-ui/lib/svg-icons/action/info'; 
import { getTable } from '../../actions/DALIActions'; 
import TokenStore from '../../stores/TokenStore'; 
import TableStore from '../../stores/TableStore'; 

const styles = { 
    root: { 
     paddingTop: 200, 
     width: '100%', 
    }, 
    headerStyle: { 
     textAlign: 'center', 
    }, 
    container: { 
     border: 'solid 1px #d9d9d9', 
     height: 500, 
     overflow: 'hidden', 
    }, 
}; 

class MainTablePage extends React.Component { 

    getTable(id) { 
     getTable(TokenStore.getToken(), id); 
    } 

    addTables() { 
     let tableArray = TableStore.getTables().objects; 
     console.log(tableArray); 
     let tableList = tableArray.map((el, i) => { 
      return (
       <ListItem 
        key={i} 
        id={el.id} 
        primaryText={el.title} 
        leftIcon={<ActionInfo />} 
        containerElement={<Link to="/table" />} 
        linkButton={true} 
        onTouchTap={this.getTable.bind(this, el.id)} 
       /> 
      ); 
     }); 
     return tableList; 
    } 

    render() { 
     return (
      <div> 
       <div style={styles.headerStyle}> 
        <h1>Here are the current tables available</h1> 
       </div> 
       <div style={styles.root}> 
        <div style={styles.container}> 
         <List> 
          {this.addTables()} 
         </List> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default MainTablePage; 

そうそう、おそらく問題を助けないように、私は材料-UIを使用しています！

すべてのヘルプは非常にお時間を

おかげ

Answer 1

火コンポーネントcomponentDidMount()内の行動を高く評価し、あなたのストア内の負荷状態に設定されるだろう。

アクションが発生し、要求が行われると、ロード状態がtrueに設定されます。データを取得したら、それをfalseに戻します。この方法では、フェッチされていないデータに依存するコンポーネントではなく、ローダーをレンダリングします。

どのように動作するかを示すコードが更新されました。もう質問がある場合は教えてください。

詳細はReact's lifecycle methodsへのリンクです。

class MainTablePage extends React.Component { 
    componentDidMount() { 
     // fire your action here 
    } 
    getTable(id) { 
     getTable(TokenStore.getToken(), id); 
    } 

    addTables() { 
     let tableArray = TableStore.getTables().objects; 
     console.log(tableArray); 
     let tableList = tableArray.map((el, i) => { 
      return (
       <ListItem 
        key={i} 
        id={el.id} 
        primaryText={el.title} 
        leftIcon={<ActionInfo />} 
        containerElement={<Link to="/table" />} 
        linkButton={true} 
        onTouchTap={this.getTable.bind(this, el.id)} 
       /> 
      ); 
     }); 
     return tableList; 
    } 

    render() { 
     const { loading } = this.props; // loading state from your store 

     if (loading) { 
      // return a loader component while your data is fetched 
      return <Loader />;  
     } 

     return (
      <div> 
       <div style={styles.headerStyle}> 
        <h1>Here are the current tables available</h1> 
       </div> 
       <div style={styles.root}> 
        <div style={styles.container}> 
         <List> 
          {this.addTables()} 
         </List> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}