2016-07-17 4 views
0

내 분산 점의 너비를 계산하려고 시도하므로 내 d3 구성 요소에 소품으로 전달할 수 있습니다. 난 문제가 콘솔을 내 ComponentDidMount window.addEventListener ('resize', this.handleResize)에 의해 호출되고 handleResize 함수를 로깅하지만 handleResize 함수에서 setState 수 없거나 외부의 아무것도 액세스 할 것으로 보인다. . 또한 var self = this를 시도했습니다. 그것을 rebind하지만 여전히 this.setState 함수 또는 self.setState 함수가 아닙니다 얻고있다.Windows가 반응을 일으켜 크기를 조정 한 후 setState. 소품으로 동적 너비를 전달하려고 시도

import React, { PropTypes, Component } from 'react'; 
import { getDataRange, getTeams, getFile, getAllHitsData, getPlayers} from 'api/index.js'; 
import {Table, Thead, Th, Tr, Td} from 'components/Reactable'; 
import Autosuggest from 'react-autosuggest'; 
import { Link } from 'react-router'; 
import ScatterChart from 'components/scatterchart'; 
import DashboardStats from 'components/dashboard-stats'; 
import DateRangeComponent from 'components/date-range'; 
import AdminSquare from 'components/admin-square'; 
import { connect } from 'react-redux'; 
import { changeStartDate, changeEndDate } from '../../redux/modules/redux-date-change'; 
import { sendHitData } from '../../redux/modules/send-hit.js'; 
import { Loading } from 'react-loading'; 

let allHitDatas = []; 
let hitDatas = []; 
let teams = []; 
// let selectedTeamID = null; 
// let selectedTeamName = 'all_teams'; 
let newFile = ''; 
// let teamId = ''; 
let players = []; 
let width; 

class Dashboard extends Component { 
    static propTypes = { 
     team: PropTypes.object.isRequired, 
     startDate: PropTypes.string.isRequired, 
     endDate: PropTypes.string.isRequired, 
     dispatch: PropTypes.func.isRequired 
    }; 
    static contextTypes = { 
     router: PropTypes.object 
    }; 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      showRangePicker: false, 
      hitDatas: [], 
      teams: [], 
      start: "", 
      end: "", 
      team: this.props.team, 
      selectedTeamID: null, 
      selectedTeamName: "", 
      newFileConfirmation: false, 
      players: [], 
      allHitDatas: [], 
      suggestions: this.getSuggestions(''), 
      selected: '', 
      showDatePickerControls: false, 
      // maxHic: 0 
      // showScatterPlot: true 
     }; 
     this.onChange = this.onChange.bind(this); 
     this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this); 
    } 

    componentWillReceiveProps() { 
     this.setState({ 
      maxHic: 0, 
      team: this.props.team, 
      selectedTeamID: this.props.team.id, 
      startDate: this.props.startDate, 
      endDate: this.props.endDate 
     // allHitDatas: [] 
     },() => { 
     // this.getDomains(); 
      this.dataChangeHelper(); 
      return this.state; 
     }); 
    } 

     componentDidMount() { 
     this.dataChangeHelper(); 
     window.addEventListener('resize', this.handleResize); 

     getTeams().then((response) => { 
      teams = response.data; 
      this.setState({teams: teams}); 
     }); 

     getPlayers().then((response) => { 
      players = response.data; 
      this.setState({ 
       players: players 
      },() => { 
        return this.state; 
      }); 
     }); 
     } 

    getDomains() { 
     let dates = []; 
     let hicArray = []; 
     console.log(this.state.allHitDatas); 
     if (this.state.allHitDatas.length === 0) { 
      return allHitDatas.map((hitData) => { 
       let date = Date.parse(hitData.EventTime); 
       dates.push(date); 
       hicArray.push(hitData.Hic); 
       let maxDate = Math.max.apply(null, dates); 
       let maxHic = 0; 
       let minDate = Math.min.apply(null, dates); 
       let minHic = 0; 
       this.setState({ 
        minDate: minDate, 
        maxDate: maxDate, 
        minHic: minHic, 
        maxHic: maxHic 
       },() => { 
        console.log(this.state.maxHic); 
        return this.state; 
       }); 
       }); 
     } 
     return this.state.allHitDatas.map((hitData) => { 
      let date = Date.parse(hitData.EventTime); 
      dates.push(date); 
      hicArray.push(hitData.Hic); 
      let maxDate = Math.max.apply(null, dates); 
      let maxHic = Math.max.apply(null, hicArray); 
      let minDate = Math.min.apply(null, dates); 
      let minHic = Math.min.apply(null, hicArray); 
      this.setState({ 
       minDate: minDate, 
       maxDate: maxDate, 
       minHic: minHic, 
       maxHic: maxHic 
      },() => { 
       console.log(this.state.maxHic) 
       return this.state; 
      }); 
     }); 
    } 

    dataChangeHelper() { 
      const newConfig = { 
      start: this.props.startDate, 
      end: this.props.endDate, 
      team: this.props.team.id 
      }; 

      getDataRange(newConfig) 
      .then((response) => { 
      hitDatas = response.data; 
      this.setState({ 
       hitDatas: hitDatas 
       },() => { 
        return this.state; 
       }); 
      }); 
      getAllHitsData(newConfig) 
      .then((response) => { 
      allHitDatas = response.data; 
      this.setState({ 
       allHitDatas: allHitDatas 
       },() => { 
        this.getDomains(); 
        return this.state; 
       }); 
      }); 
    } 

    handleResize() { 
     // const self = this; 
     let elem = document.getElementById('scatter-chart'); 
     width = elem.offsetWidth * 0.9; 
     console.log(width); 
     this.setState({ 
      scatterWidth: width 
     },() => { 
      console.log(this.state.scatterWidth); 
     }); 
    } 


    render() { 
    if (this.state.teams.length === 0 || this.state.players.length === 0) { 
     return (
      <div className="no-data-container"> 
       <div className="no-data-message">We don't have any data for you right now. Would you like 
        to add some players, teams, or devices? 
       </div> 
       <ul className="no-data-links"> 
        <AdminSquare title="PLAYER ADMIN" icon="person" link="/player"/> 
        <AdminSquare title="TEAM ADMIN" icon="group" link="/team"/> 
        <AdminSquare title="DEVICE ADMIN" icon="sd_storage" link="/device"/> 
       </ul> 
      </div> 
     ); 
    } 

    const { value, suggestions } = this.state; 
    const inputProps = { 
     placeholder: 'Search for a player', 
     value, 
     onChange: this.onChange 
    }; 

    return (
     <div> 

        <ScatterChart 
        data={this.state.allHitDatas} 
        domain={{x: [this.state.minDate, this.state.maxDate], y: [this.state.maxHic, 0]}} 
        statOneTitle="HIC" 
        sendHitData={(d) => this.handleImpactClick(d)} 
        width={ width } 
        /> 
     </div> 
     ); 
     } 
    } 

    function mapStateToProps(state) { 
     console.log(state); 
     return { 
      startDate: state.startDate, 
      endDate: state.endDate 
     }; 
    } 

    export default connect(mapStateToProps)(Dashboard); 

답변

1

handleResize에는 'this'와 연결된 Dashboard 개체가 없습니다. 당신은 당신이 당신이 계획하는 경우 대시 보드

0

에 정의 된 모든 오브젝트를 this.setState 좋아해요 또는 액세스 할 수있는이 keyword..so을 바인딩 할 window.addEventListener('resize',this.handleResize.bind(this));

window.addEventListener('resize', this.handleResize); 교체 이벤트 hanler 에 바인드해야 메서드 내부에 this을 사용하고 메서드가 react component's lifecycle의 일부가 아닌 경우 구성 요소 인스턴스에 set it's context이 필요합니다. 귀하의 경우에는 handleResize, getDomains, dataChangeHelper 방법에 대한 올바른 컨텍스트를 설정하지 않은, 그래서 생성자는 몇 가지 추가 바인딩이 필요 :

this.handleResize = this.handleResize.bind(this); getDomains ... dataChangeHelper ...