ajaxを反応コンポーネントレンダリングで使用する

Question

私はコンテンツリンクのリストを持っています。ユーザーがアイテムをクリックすると、ajaxリクエストがサーバーに送信され、受信データが反応コンポーネントに表示されます。 componentWillReceivePropsを使用してリクエストを送信しましたが、URLをリフレッシュできません（ルータはコンポーネントを呼び出さない）。

それはindex.jsファイルです：それはApp.jsファイルの "レンダリング" 機能だ

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

：

render() { 
    return (
     <div> 
      <h1>App</h1> 
      <ul>{this.renderItems()}</ul> 
      {this.props.children} 
     </div> 
    ); 
} 

と、それはUmContent.jsファイルです：それはそう

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

    componentWillReceiveProps(props) { 

     if (!props || !props.params || !props.params.id) { 
      return; 
     } 
     console.log(props.params.id); 
     let itemId = props.params.id; 
     let that = this; 
     $.ajax({ 
      url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/" + itemId, 
      type: 'GET', 
      dataType: 'html' 
     }).done((data)=> { 
      that.setState({data: data}); 
     }).fail(()=> { 
      that.setState({data: <div> Something is wrong</div>}); 
     }); 
    } 

    render() { 
     return (
      <div ref="aaa"> 
       <UmC content={this.state.data}/> 
      </div>); 
    } 
} 

Answer 1

あなたは間違ったことをしました。自分のコードを自分で書き直します。

import React, {Component, PropTypes} from 'react'; 
import Content from './content'; 

class ContentWrapper extends Component { 
    state = { 
    params: '/something', 
    } 

    componentWillMount() { 
    // Simulate react-router property changing 
    setTimeout(() => {this.setState({params: '/something-else'})}) 
    } 

    render() { 
    return(
     <Content params={this.state.params} /> 
    ) 
    } 
} 

module.exports = ContentWrapper; 

Contentコンポーネント：

import React, {Component, PropTypes} from 'react'; 
var $ = require("jquery"); 

class Content extends Component { 
    state = { 
    text: 'Pending...' 
    } 

    componentWillReceiveProps(nextProps) { 
    $.ajax({ 
     url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/item", 
     type: 'GET', 
     dataType: 'json' 
    }).done((data)=> { 
     this.setState({text: 'Success'}); 
    }).fail(()=> { 
     this.setState({text: 'Fail'}); 
    }); 
    } 

    render() { 
    return(
     <span> 
     {this.state.text} 
     </span> 
    ) 
    } 
} 

module.exports = Content; 

これは私の作品Contentコンポーネントをラップする

ContentWrapper。 経路が変更されたときにcomponentWillReceivePropsが呼び出されていますか？

Answer 2

コメントと回答ありがとうございます。右のコンポーネント：

export default class UmContent 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; 
    } 
    console.log(props.params.id); 
    let itemId = props.params.id; 
    let that = this; 
    $.ajax({ 
     url: "http://192.168.78.2/mygetcontenttoactionresult/" + itemId, 
     type: 'GET', 
     dataType: 'html' 
    }).done((data)=> { 
     that.setState({data: data}); 
    }).fail(()=> { 
     that.setState({data: <div> Something is wrong</div>}); 
    }); 
} 

componentWillReceiveProps(props) { 
    this.sendRequestToServer(props); 
} 

render() { 
    return (
     <div ref="aaa"> 
      <UmC content={this.state.data}/> 
     </div>); 
} 
} 

今、私はちょうど知りたいことは：なぜすべての要求が2回送信されるのですか？