Tepki-yönlendirici - Çok yakında ateş yakıyor

Question

Reaktif yönlendiriciyi uygulamaya dahil etmeye yeni başladım ve çekicilik gibi çalışıyor. Ancak, benim küçük bir problemim var. Bir noktada farklı bir sayfaya dönüşen bir butona tıklamam gerek ama aynı zamanda bir harekete geçme çağrısı yapmam gerekiyor (sunucuya giden ve verileri tabloda gösterilecek olan). Şu anda tepki-yönlendirici bağlantısı eylemden önce ateşleniyor ve bu nedenle bu noktada uygulamayı kırıyorsunuz, çünkü bu haritadan geçecek bir veri yok!

Sorunun, bu olayların gerçekleştiği sırayı nasıl değiştirebileceğim, böylece sayfa değiştiğinde bir mağazada (eylem tarafından güncelleştirilen) veri var mı?

Güncel kod bloğu:

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; 

Ah evet muhtemelen konularda yardımcı kalmaması, ben maddi-ui kullanıyorum!

Herhangi bir yardım çok zaman

Answer 1

Yangın bileşenleri componentDidMount() içinde eylem için

Teşekkür mutluluk duyacağız ve mağaza içinde bir yükleme durumunu ayarlayın.

Eylem başlatıldığında ve bir istek yapıldığında yükleme durumu true olarak ayarlanır. Veri getirildikten sonra false değerine geri döner. Bu şekilde, getirilmeyen verilere dayanan bileşenler yerine bir yükleyici oluşturuyorsunuz.

Nasıl çalışacağını göstermek için kodunuzu güncelleştirdim. Başka sorularınız varsa lütfen bize bildirin.

Daha fazla bilgi için React'ın lifecycle methods sayfasına bir bağlantı vardır.

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> 
     ); 
    } 
}