export default class AchieveScreen extends ValidationComponent{
constructor(props) {
super(props)
this.state = {
visible: false,
filter: 1,
date: new Date(),
selected: new Date(),
loaded: false,
data: [],
feedbackText:"",
target:[],
refreshing:false,
refreshValue:1
}
}
handleUpdate = async () => {
this.setState({ loaded: false })
await this.getter()
this.forceUpdate();
};
GetData = async () => {
const {date,selected}=this.state
const data = await GetAchieve()
if (data.status == 200) {
this.setState({
data: data.data,
target:data.data !== null ? data.data.filter((achieve) => achieve.date.includes(selected)) : null,
loaded: true,
})
}
}
componentDidMount() {
this._unsubscribe = this.props.navigation.addListener('focus',() => {
console.log('ok')
const UserStatus=this.status()
if(UserStatus){
this.GetData()
}
});
}
_onRefresh=async()=> {
try {
this.setState({refreshing: true});
this.setState(({ refreshValue }) => ({
refreshValue: refreshValue + 1,
}));
this.setState({refreshing: false});
} catch (error) {
throw error
}
}
componentWillUnmount() {
this._unsubscribe();
}
shouldComponentUpdate(nextProps, nextState) {
if(this.state.data != nextState.data){
console.log('data re')
return true;
}
if(this.state.refreshValue != nextState.refreshValue || this.state.selected != nextState.selected || this.state.target != nextState.target ){
console.log('refreshing value')
return true;
}
return false
}
sendFeedBack=async()=>{
const {feedbackText} = this.state
this.validate({
feedbackText: {minlength:3, maxlength:4000},
});
if(!this.isFieldInError('feedbackText')){
const request = await feedback(feedbackText)
if(request.status == 200){
this.setState({
feedbackText:"",
visible:false
})
}
}
}
flag = (date) => {
items = this.state.data !== null ? this.state.data.filter((achieve) => achieve.date.includes(date)) : null
let Professional = false
let Personal = false
if (!!items) {
items.map(item => {
if (item.flag == 1) { Professional = true } else if (item.flag == 2) { Personal = true }
})
if (Professional && Personal) {
return <>
<Text> <Icon name="flag-o" size={10} color="#ff6666" /> </Text>
<Text> <Icon name="star-o" size={10} color="#cc80ff" /> </Text>
</>
} else if (Professional) {
return <Text> <Icon name="flag-o" size={10} color="#ff6666" /> </Text>
} else if (Personal) {
return <Text> <Icon name="star-o" size={10} color="#cc80ff" /> </Text>
}
}
}
week = () => {
const { date, selected,loaded } = this.state
const week = this.state.date.week()
if(loaded){
return (
<>
{week.map((day, index) => {
return (
selected === week[index].plenaDiem ?
<LinearGradient key={index} colors={['#EBDDFD', '#DFDCFF']} start={[0, 1]} end={[1, 0]} style={{ borderRadius: 12 }}>
<TouchableOpacity
key={index}
style={[styles.weekday]}
onPress={() => { this.setState({ selected: week[index].plenaDiem }) }}
disabled={week[index].enable}
>
<Text style={styles.name} >{week[index].dies}</Text>
<Text style={[styles.num, { color: week[index].color }]} >{week[index].diem}</Text>
<View style={styles.flags}>
{this.flag(week[index].plenaDiem)}
</View>
</TouchableOpacity>
</LinearGradient>
:
<TouchableOpacity
key={index}
style={[styles.weekday]}
onPress={() => {
console.log(this.state.target)
this.setState({
selected: week[index].plenaDiem,
target:this.state.data !== null ? this.state.data.filter((achieve) => achieve.date.includes(week[index].plenaDiem)) : null,
})
}}
disabled={week[index].enable}
>
<Text style={styles.name} >{week[index].dies}</Text>
<Text style={[styles.num, { color: week[index].color }]} >
{week[index].diem}
</Text>
<View style={styles.flags}>
{this.flag(week[index].plenaDiem)}
</View>
</TouchableOpacity>
)
})
}
</>
)
}
}
render() {
const { data, date, visible, selected, filter, loaded,feedbackText,refreshing,target } = this.state
// let render = data !== null ? data.filter((achieve) => achieve.date.includes(selected)) : null
// if (filter !== 3 && render !== null) {
// render = render.filter((item) => item.flag == filter)
// }
return (
<>
<View style={styles.header} >
<View style={styles.top}>
<View style={styles.icon}>
<Image source={require('../../assets/header/CalendarIcon.png')} />
<Text style={styles.day}>{date.day()}</Text>
</View>
<View style={styles.items}><Image source={require('../../assets/header/medalLogo.png')} /></View>
<View style={styles.items}><IconButton icon='question' style={styles.question} color={"#000"} size={16} onPress={() => this.setState({ visible: true })} /></View>
</View>
<Modal
visible={visible}
backdropStyle={styles.backdrop}
onBackdropPress={() => this.setState({ visible: false })}>
<Card disabled={true} style={{backgroundColor:"#FFF",width:wp('90%'),borderRadius:10}}>
<Input
name='feedbackText'
value={feedbackText}
style={styles.feedbackText}
multiline={true}
maxLength={4000}
placeholder="tell us about you expermenit"
onChangeText={(text) => { this.setState({
feedbackText: text,
}) }}
/>
<Button
disabled={feedbackText.length<3?true:false}
onPress={() => {this.sendFeedBack()}}>
subimt
</Button>
</Card>
<View style={[styles.close]}>
<AntDesign name={"closecircleo"} color="#000" onPress={() => this.setState({ visible: false })} size={25} />
</View>
</Modal>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
>
<View style={styles.month}>
<Text style={styles.monthName}>{date.monthName()}</Text>
</View>
<View style={styles.week}>
{loaded ? this.week() : <LoadingScreen/>}
</View>
</ScrollView>
</View>
<View style={styles.container} >
<View style={styles.achieve}>
<View>
{/* <SwitchSelector
options={options}
initial={0}
style={styles.switch}
buttonColor={"#fff"}
textColor={"#AB9CB3"}
selectedColor={"#000"}
buttonMargin={3}
imageStyle={styles.switchicon}
backgroundColor={"#F0F1F8"}
onPress={value => this.setState({ filter: value })}
/> */}
</View>
<View style={styles.count}>
<Text style={styles.countText}>you have achieved {target !== null ? target.length : null}</Text>
</View>
</View>
<View style={styles.cards}>
<Cards type={true} data={target} storage={data} handle={this.handleUpdate} />
</View>
</View>
</>
)
}
这是日历组件，运行时没有任何显示，但数据可以在控制台日志中。我可以在那里显示数据，我需要按 Ctrl+s 来刷新 expo 'fast refresh' 以在模拟器中显示数据
我在渲染部分加载了逻辑，但问题仍然需要修复
有什么建议么？
