2015-11-12 17 views
5

Sitemin başlığının 10 kategori resmi var (bağlantılar). Her biri, kategorinin ilgili kategorisiShow'a yönlendirmek için React-Router'ın Link bağlantısını kullanır.React-Router'ın Link-URL'sini günceller ancak yenilemez. Sayfayı yenile

bağlantıcategoryIndex gelen eserler, ancak artık formunu bir cagetoryShow tıklandığını çalışır. Tıklandığında tarayıcıyı düzgün bir şekilde günceller, örneğin pushState/cateories/18 ve/categories/2 komutlarını yapar, ancak tarayıcı yenilenmez.

Değerleme, diğer tüm Dizin türünden ve Gösterme türü sayfalardan bağlantı bağlantı noktasıdır. Özellikle categoryShow'dan çalışmıyor. Aynı isme, örneğin Link to = "categoryShow", bir şekilde art arda tıklamalar, yönlendirici bir sayfa yenileme yapmaktan tutar? Düzenleme: Bunu değiştirmeyi denedim: = {"/ categories /" + this.props.id} için bağlantı ve aynı şeyi yapıyor.

İşte önemli bileşen yapısı. URL'yi güncelleyerek tüm veriler başarıyla iletiliyor.

-categoryShow 
-header (fetches and passes category data to child) 
    -headerMenu (receives category data, passes on to child) 
    -headerMenuCard (receives category data, uses the id in the link seen below) 

headerMenuCard:

var HeaderMenuCard = React.createClass({ 

... 
    return(
     <div > 
      <Link to="categoryShow" params={{id: this.props.id}} ></Link> 
     </div> 
    ) 
}) 

İşte CategoryShow, var link yolları:

var CategoryShow = React.createClass({ 

getInitialState: function(){ 
    return{ 
     didFetchData: false, 
     items: [], 
     userID: localStorage.getItem('userID'), 
     headerImage: "../categories.png" 
    } 
}, 

componentDidMount: function(){ 
    this.fetchData() 
}, 

fetchData: function(){ 
    var data = { 
     userID: this.state.userID 
    } 
    var params = this.props.params.id 

    $.ajax({ 
     type: "GET", 
     url: "/categories/" + params, 
     data: data, 
     dataType: 'json', 
     success: function(data){ 
      this.setState({didFetchData: 'true', items: data.items}) 
     }.bind(this), 
     error: function(data){ 
      alert("error! couldn't fetch category data") 
     } 
    }) 
}, 

render: function(){ 
    var itemArray = this.state.items.map(function(item){ 
     return <ItemCard name={item.name} key={item.id} id={item.id} photo_url={item.photo_url} description={item.description} userID={localStorage.getItem('userID')} like_status={item.like_status} /> 
    }) 
    return(
     <div> 
      <Header /> 

      <section className="body-wrapper"> 
       {itemArray}  
      </section>  
     </div> 
    ) 
} 
}) 

cevap

1

Sen' O sayfa bir özel durumda yenilemek does't bu sadece var yeni parametreleri parametre olarak alırsınız ve bu sayede sadece fetchData veya componentWillReceiveProps veya componentWillUpdate no'lu başka herhangi bir mantığı çalıştırmanız gerekir.

+0

Cevaplardan değil, posterden açıklama istemek için yorumları kullanmalısınız. – miken32

+0

Bu, componentWillUpdate içindeki durumu güncellemem gerektiğini anlamamda bana yardımcı oldu – kas