Question

我想在用户按下“添加约会”按钮时显示所选的日期，开始时间和结束时间。但是，当我按下添加约会按钮时，数据被添加到我的数据库中，但无法在FlatList上显示。

下面提供的代码段（如果需要完整的代码，我可以提供）：

export default class FrCreateScreen extends Component {

    //test
    addTimeDateAppt() {
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            console.log('Freelancer Create Screen (keyValue): ', keyValue);
            axios({
                method: 'post',
                url: Constants.API_URL + 'appointment_f/create_appointment/',
                //responseType: 'json',
                data: {
                    app_date_start: this.state.textAppointmentDate,
                    start_time: this.state.textAppointmentTime,
                    end_time: this.state.textEndTime,
                },
                headers: {
                    'X-API-KEY': Constants.API_KEY,
                    'Authorization': keyValue,
                },
            }).then(function (response) {
                this.setState({
                    timeSlots: [
                        ...this.state.timeSlots,
                        {
                            apptdate: this.state.textAppointmentDate,
                            appttime: this.state.textAppointmentTime,
                            endTime: this.state.textEndTime,
                        }
                    ],
                });
                console.log(response.data);
            }).catch(function (error) {
                console.log('Create Error: ', error);
            });
        });
    }
    //test

    deleteDateTime = (id) => {
        const filteredData = this.state.timeSlots.filter(item => item.id !== id);
        this.setState({ timeSlots: filteredData });
    }

    render() {
        return (
            <ScrollView>
                {this.getAppointmentDatePage()}
                {this.getAppointmentTimePage()}
                {this.getEndTimePage()}
                <TouchableOpacity
                    style={styles.addContainer}
                    onPress={() => this.addTimeDateAppt()}
                >
                    <Text style={styles.addText}> Add Appointment </Text>
                </TouchableOpacity>
                <View>
                    <FlatList
                        data={this.state.timeSlots}
                        keyExtractor={({ id }, index) => index.toString()}
                        renderItem={({ item, index }) => {
                            return (
                                <View style={styles.containerList}>
                                    <View style={styles.dateList}>
                                        <Text style={{ fontWeight: 'bold' }}>Date: </Text>
                                        <Text style={styles.textTime}>{item.apptdate}</Text>
                                    </View>
                                    <View style={styles.row}>
                                        <View>
                                            <Text style={{ fontWeight: 'bold' }}>Start Time:</Text>
                                            <Text style={styles.textTime}>{item.appttime}</Text>
                                        </View>
                                        <View>
                                            <Text style={{ fontWeight: 'bold' }}>End Time:</Text>
                                            <Text style={styles.textTime}>{item.endTime}</Text>
                                        </View>
                                        <TouchableOpacity
                                            onPress={() => this.deleteDateTime(item.index)}
                                        >
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}
                    />
                </View>
            </ScrollView>
        )
    };
};

截屏：

Answer 1

该错误表示“状态”不存在。

您是否尝试过将方法更改为箭头功能，即

    addTimeDateAppt = () => {...}

这会将方法绑定到组件的实例，并且对'this.state'的引用将起作用。

您还声明了变量“ self”，它引用“ this”，但是无论如何在该方法中继续使用“ this”。不知道这是否是故意的，但是如果使用箭头语法，则不需要。

React Native TypeError：无法读取未定义的属性“ timeSlots”

1 个答案: