[英]setState after windows resize error with react. Trying to pass dynamic width as props
嘗試動態計算散點圖的寬度,以便將其作為道具傳遞給d3組件。 我在ComponentDidMount中的window.addEventListener('resize',this.handleResize)調用的handleResize函數中沒有控制台登錄問題,但是我無法在handleResize函數中設置state或訪問其中的任何內容。 我也嘗試過var self = this; 重新綁定它,但仍然得到this.setState不是函數或self.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);
handleResize沒有與'this'關聯的Dashboard對象。 您需要綁定到事件hanler replace window.addEventListener('resize', this.handleResize);
使用window.addEventListener('resize',this.handleResize.bind(this));
它將綁定this關鍵字..以便您可以執行this.setState或訪問儀表板中定義的任何對象
如果您打算在方法內部使用this
方法,並且該方法不屬於react組件生命周期的一部分,則需要將其上下文設置為組件實例。 在您的情況下,您沒有為handleResize
, getDomains
和dataChangeHelper
方法設置正確的上下文,因此構造函數需要一些其他綁定:
this.handleResize = this.handleResize.bind(this); getDomains ... dataChangeHelper ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.