在Unicode::Normalize之后，我被重定向到仪表板页面，在我登陆后立即调用3个API，然后在其上显示数据。我从authentication页面获取了siteId，可以在redux存储中使用，并将authentication设置为siteId页面的状态。问题是我的动作在状态从redux获取值之前触发。 dashboard正在用MapStateToProps触发动作。触发操作后，将设置状态。如果我对状态进行硬编码，那么它将起作用。我试图在触发操作之前检查我的状态是否已设置，但似乎我的检查不起作用。
undefined这是完整的组件代码：
class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
alarmCount: [],
workOrderCount: [],
etaWorkOrder: [],
countNum: true,
siteId: this.props.storeNum && this.props.storeNum.siteId
// siteId: 5260
}
}
componentDidMount() {
this.props.getOpenWorkOrdersCount();
this.props.getEtaWorkOrder();
}
componentWillReceiveProps({ alarmCount, workOrderCount, etaWO, storeNum }) {
if(alarmCount.code) {
this.setState({ alarmCount: alarmCount.code.data.ticketCount })
}
if(workOrderCount) {
this.setState({ workOrderCount: workOrderCount.data.event.woOutstanding })
}
if(etaWO) {
this.setState({ etaWorkOrder: etaWO.data.woList })
}
if(storeNum && storeNum.siteId && !(alarmCount.fetching || alarmCount.success) && !this.state.alarmCount.length){
this.props.getAlarmCount({siteId: storeNum.siteId});
}
}
const mapStateToProps = state => {
return {
alarmCount: state.alarmCount,
workOrderCount: state.workOrderCount.count,
etaWO: state.etaWorkOrder.count,
storeNum: state.ssoReducer.user
}
}
const mapDispatchToProps = dispatch => ({
getAlarmCount: data => dispatch(AlarmCountActions.getAlarmCount({ data }))
});
export default connect( mapStateToProps, mapDispatchToProps)(Dashboard);
我的支票怎么了？ ComponentWillReceiveProps现在正在触发操作，我之前让ComponentDidMount触发了该操作，该操作也不起作用。如何确保在触发class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
alarmCount: [],
workOrderCount: [],
etaWorkOrder: [],
countNum: true,
// siteId: props.storeNum && props.storeNum.siteId
siteId: ''
}
console.log('<<< storeNum', props.storeNum);
}
componentDidMount() {
// this.props.getOpenWorkOrdersCount();
// this.props.getEtaWorkOrder();
// if(this.props.storeNum){
// this.props.getAlarmCount(this.props.storeNum.siteId);
// }
}
// componentWillReceiveProps({ alarmCount, workOrderCount, etaWO, storeNum }) {
// if(alarmCount.code) {
// this.setState({ alarmCount: alarmCount.code.data.ticketCount })
// }
// if(workOrderCount) {
// this.setState({ workOrderCount: workOrderCount.data.event.woOutstanding })
// }
// if(etaWO) {
// this.setState({ etaWorkOrder: etaWO.data.woList })
// }
// if(storeNum){
// this.setState({ siteId: storeNum.siteId })
// }
// }
componentDidUpdate(prevProps) {
console.log('prevProps: ', prevProps)
if(prevProps.storeNum.siteId !== this.props.storeNum.siteId){
this.props.getAlarmCount(this.props.storeNum.siteId);
}
}
todaysDateFormatted = () => {
let today = new Date();
let dd = today.getDate();
let mm = today.getMonth() + 1;
let yyyy = today.getFullYear();
if (dd < 10) { dd = '0' + dd }
if (mm < 10) { mm = '0' + mm }
return today = mm + '-' + dd + '-' + yyyy;
}
howManyToday = data => {
let count = 0;
let todaysDate = this.todaysDateFormatted();
data.map(item => {
date = item.eta.replace(/(\d{4})\-(\d{2})\-(\d{2}).*/, '$2-$3-$1')
if(todaysDate == date) count++;
})
return count;
}
render() {
const navigation = this.props.navigation;
const woCount = this.state.workOrderCount
console.log(' ^^^^^^^ storeNuM: ', this.state.siteId)
return (
<View style={styles.container}>
<View style={styles.innerBox}>
<View style={styles.leftBox}>
<TouchableOpacity
style={styles.activeAlarms}
onPress={() => navigation.navigate(routes.ALARMS)}>
<View style={{ justifyContent: 'flex-end', flex: 1, background: 'transparent'}}>
{this.state.countNum ? (
<Fragment>
<Text style={[styles.blueColor, styles.font_24, ]}>{this.state.alarmCount}</Text>
</Fragment>
) : null}
<Text style={[styles.blueColor, styles.font_16] }>Active Alarms</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.openWorkOrders}
onPress={() => navigation.navigate(routes.WORK_ORDERS)}>
<View style={{ justifyContent: 'flex-end', flex: 1 }}>
<Text style={[styles.whiteColor, styles.font_24]}>{woCount}</Text>
<Text style={[styles.whiteColor, styles.font_16]}>Open{'\n'}Work Orders</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.rightBox}>
<TouchableOpacity
style={styles.todayWorkOrders}
onPress={() => navigation.navigate(routes.WORK_ORDERS)}
>
<View style={{ justifyContent: 'flex-end', flex: 1 }}>
<Text style={[styles.whiteColor, styles.font_24]}>{this.howManyToday(this.state.etaWorkOrder)}</Text>
<Text style={[styles.whiteColor, styles.font_16]}>Today ETA{'\n'}Work Orders</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.diyTrainingVideos}
onPress={() => navigation.navigate(routes.TRAINING_VIDEOS)}
>
<View style={{ justifyContent: 'flex-end', flex: 1 }}>
<Text style={[styles.blueColor, styles.font_16]}>DIY{'\n'}Training Videos</Text>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.createWorkOrderBox}>
<TouchableOpacity
style={styles.createBtn}
onPress={() => navigation.navigate(routes.CREATE_WORK_ORDER)}>
<Text style={styles.workOrderText}>+ WORK ORDER</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
const mapStateToProps = state => {
return {
alarmCount: state.alarmCount,
workOrderCount: state.workOrderCount.count,
etaWO: state.etaWorkOrder.count,
storeNum: state.ssoReducer.user
}
}
const mapDispatchToProps = dispatch => ({
getEtaWorkOrder: () => dispatch(etaWorkOrderActions.etaWorkOrder()),
getOpenWorkOrdersCount: () => dispatch(WorkOrderCountActions.count()),
getAlarmCount: data => dispatch(AlarmCountActions.getAlarmCount({ data })),
logoutUser: () => dispatch(logoutAction.logoutUser())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Dashboard);
之前设置好我的状态？