2016-09-10 18 views
0

私は反応する初心者です。私はthis questionを読むが、私の問題は解決しなかった。私はcomponentWillReceivePropsの理解に間違っていると思う。私のコンポーネントと、それは親のこのようなものです: 親:反応レンダリングメソッドが2回呼び出され、URLが変更されます

import React from 'react'; 
import { Router, Route, Link } from 'react-router'; 

export default class App extends React.Component { 

items = [ 
    {id: 1086, title: 'MENU1'}, 
    {id: 1083, title: 'MENU2'}, 
    {id: 1093, title: 'MENU3'}] 

renderItems =()=> { 
    return this.items.map((item, index)=> { 
     let url = 'content/' + item.id; 
     return (<li key={index}><Link to={url} activeClassName="active">{item.title}</Link></li>); 
    }); 
} 


render() { 
    return (
     <div> 
      <h1 style={{textAlign:'center'}}>My First React App</h1> 
      <ul className="nav nav-pills nav-justified">{this.renderItems()}</ul> 
      {this.props.children} 
     </div> 
    ); 
} 

}

子:

import React, { Component } from 'react'; 
import UmContent from './UmContent' 
import $ from 'jquery'; 
import ProgressBar from 'progressbar.js'; 


export default class UmContentContainer extends Component { 
state = { 
    data: '' 
} 

firstInitial = true; 

componentDidMount() { 
    if (this.firstInitial) { 
     let props = this.props; 
     this.sendRequestToServer(props); 
     this.firstInitial = false; 
    } 
} 

sendRequestToServer = (props)=> { 
    if (!props || !props.params || !props.params.id) { 
     return; 
    } 
    let itemId = props.params.id; 
    let that = this; 
    this.setState({data: itemId}); 
    } 

componentWillReceiveProps(props, states) { 
    this.sendRequestToServer(props); 
    console.log(props.params.id); 
} 

render() { 
    return (
     <div className="col-md-12"> 
      <h1>{this.state.data}</h1> 
     </div>); 
} 

}

とindex.js:

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, Link,hashHistory } from 'react-router' 
import App from './App'; 
import UmContentContainer from './Umbreco/UmContentContainer'; 

render((
<Router history={hashHistory}> 
    <Route path="/" component={App}> 
      <Route path="/content/:id" component={UmContentContainer} /> 
    </Route> 
</Router> 
), document.getElementById('root')) 

最初にマウントした後、コンソールは "id"を2回書き込む。なぜ私は理解できないのですか?

+0

2つのレンダリングで 'props'がどう違うのか確認しましたか? – Scarysize

+0

@Scarysizeの両方で、小道具のidの値は同じです。 – sahar

+0

@sahar他の小道具はいかがですか?あなたは 'console.log(props)'だけを試しましたか? – Waiski

答えて

0

私の答えはHEREでした。私は間違っていました。実際には、hashHistoryと新しいURLを押していました。ないcomponentWillReceiveProps

関連する問題