2017-06-26 6 views
0

私は反応の新入生です。teamIdによってチームのメンバー情報を取得する反応コンポーネントを書きたいと思います。ブラウザが同じhrefを繰り返し取得しないようにする方法

コードクロームdevtoolにおけるネットワークビューによって

import React from 'react'; 
 
import PropTypes from 'prop-types'; 
 
import UserTable from './pm_user_table'; 
 
import {Form,Modal,Input,Button} from 'antd'; 
 
const FormItem = Form.Item; 
 

 
class PMBody extends React.Component{ 
 
    constructor(props){ 
 
    super(props); 
 
    this.state={ 
 
     curTeam:this.props.curTeam, 
 
     memberList:[] 
 
    } 
 
    } 
 
    componentWillMount(){ 
 
    console.log('component mount'); 
 

 
    } 
 
    componentWillReceiveProps(nextProps){ 
 
    if(nextProps.curTeam !== this.state.curTeam){ 
 
     this.setState({curTeam:nextProps.curTeam}); 
 
    } 
 
    } 
 
    
 

 
    render(){ 
 
    let {getFieldProps} = this.props.form; 
 
    const teamId = this.state.curTeam; 
 
    var myFetchOptions={method: 'GET'}; 
 
\t fetch("http://localhost:3001/teamMembers/" +this.state.curTeam,myFetchOptions) 
 
\t .then(response=>response.json()) 
 
\t .then(json => { 
 
\t \t \t \t this.setState({memberList:json}); 
 
\t \t \t } 
 
\t).catch(function(){ 
 
\t \t \t console.log("error"); 
 
\t }); 
 
    let memberList = this.state.memberList; 
 
    const body = memberList !='' ? 
 
     <UserTable dataSource={memberList} actions={this.props.actions} /> 
 
    : 
 
     '' 
 
    ; 
 

 
    return (
 
     
 
     <div> 
 
      {body} 
 
     </div> 
 

 
    ) 
 
     
 
} 
 

 
PMBody.PropTypes = { 
 
    curTeam:PropTypes.string.isRequired, 
 
    actions: PropTypes.object.isRequired 
 
} 
 

 
export default PMBody =Form.create({})(PMBody);

反応し、ブラウザが繰り返し同じURLを要求しているようです。

enter image description here

enter image description here

、なぜそれがrepeately同じURLをフェッチ?

答えて

2

あなたはrender() methodの目的を誤解しています。

render()を呼び出して、何か変更があった場合にコンポーネントを更新します。それは純粋でなければならず、他のものと相互作用してはならない。

componentDidMount()に移動してください。

関連する問題