Question

React Native Wix 日历标记日期显示错误

2018-10-02

493

javascript react-native

我正在为我的项目使用 wix 日历，我已经按照其他问题中提到的所有步骤操作了类似主题。

我已经像这样编码了

class TutorCalender extends Component {

    static navigationOptions = {
        header: null,
        final_array: {},
        tution_array: [],
        unavailable_array: []
    }
    componentWillMount = async () => {
        try {
            let { data } = await axios
                .post("https://chat.qualpros.com/api/get_tutor_calendar", {
                    tutor_id: 4
                })
                .then(response => {
                    console.log(response.data.data.tutor_private_tution_date_array);
                    if (response.data.data.status === "success") {
                        this.setState({
                            tution_array: response.data.data.tutor_private_tution_date_array,
                            unavailable_array: response.data.data.tutor_schedule_unavailable_array,
                        });
                    } else {
                        alert("Something went wrong");
                    }
                });
        } catch (err) {
            console.log(err);
        }
        // console.log(this.state.tution_array.length);
        //console.log(this.state.tution_array);
        if (this.state.tution_array.length !== 0) {
            console.log('tution available')
            var objP = Object.assign(
                ...this.state.tution_array.map(o => ({
                    [o]: { selected: true, selectedColor: "green", type: "present" }
                }))
            );
            this.setState({ final_array : objP});
            console.log(this.state.final_array)
        }
        // var merged = { ...objP };
        // // console.log("Came Here");
        // this.setState({ final_array: merged });
        // console.log(this.state.final_array)
    }
    render() {
        return (
            <Container>
                <Header style={{ backgroundColor: '#d91009' }}>

                    <Left style={styles.left}>
                        <TouchableOpacity
                            style={styles.backArrow}
                            onPress={() => this.props.navigation.navigate("ProfileScreen")}
                        >
                            <FontAwesome
                                name="angle-left"
                                size={30}
                                color='#fff'
                            />
                        </TouchableOpacity>
                    </Left>
                    <Body>
                        <Text style={{ alignSelf: Platform.OS == 'android' ? 'center' : 'center' }}>Tutor calender</Text>
                    </Body>
                    <Right />
                </Header>

                {/*     <Text style={styles.text}>Calendar with marked dates and hidden arrows</Text> */}
                <Calendar
                    style={styles.calendar}
                    firstDay={1}
                    //markedDates={this.state.final_array}
                //hideArrows={true}
                />
            </Container>
        );
    }
}
export default TutorCalender;

如果我注释 markedDates prop，它工作正常，对于 console.log(this.state.final_array)，我得到的响应如下： Object { “2018-10-01”：Object { “selected”：true， “selectedColor”： “green”， “type”： “present”， }，

但是当我取消注释 markedDates={this.state.final_array} 时，它给了我错误“TypeError：null 不是对象（评估'this.state.final_array'”

我不明白我错在哪里，我已经按照提到的所有步骤操作了，提前谢谢

Answer 1

单独定义状态，这里你在静态导航中定义了状态，这是错误的

Kedar Dave

2018-10-02

Answer 2

当状态尚未通过所需信息更新（加载）时，就会发生这种情况，因此值为空。要解决这个问题，您可以设置初始值或设置条件来检查数组是否不为空（在赋值之前）。