반응 구성 요소 렌더링에서 ajax 사용

Question

사용자가 항목을 클릭하면 Ajax 요청이 서버로 전송되고 수신 된 데이터가 반응 구성 요소에 표시되어야하는 콘텐츠 링크 목록이 있습니다. componentWillReceiveProps을 사용하여 요청을 보내지 만 URL을 새로 고치지 않으면 라우터가 구성 요소를 호출하지 않습니다. 이 App.js 파일의 "렌더링"기능의

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

:

이하는 index.js 파일의

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; 

이것은 나를 위해 작동

ContentWrapper 는 Content 구성 요소를 포장합니다. 경로가 변경되면 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>); 
} 
} 

지금은 단지 다음과 같이 알고 싶습니다. 모든 요청이 두 번 전송되는 이유는 무엇입니까?