首页 > 解决方案 > 作为 prop 传递的函数在子组件中未定义,但在 props 对象中可见

问题描述

我将几个函数作为道具传递给子组件,但onSubmit我传递的函数在子组件中未定义。但是,如果我登录this.props子组件,我可以看到它onSubmit已定义。

我传递的其他功能都工作正常,所以我不确定问题出在这个功能上。

这是有问题的onSubmit功能:

onSumbit = (event) => {
    const {
        email, passwordOne, name, schedule,
    } = this.state;

    const createUserData = (authUser) => this.props.firebase
        .user(authUser.user.uid)
        .set({
            type: 'Venue',
        });

    const createVenueData = (authUser) => {
        const placeLocation = this.state.place.geometry.location;
        const placeAddress = this.state.place.address_components;

        if (!placeLocation) {
            return Promise.reject(
                new Error('No coordinates for location, please use Google Autocomplete to select address'),
            );
        }

        return this.props.firebase.venues().add({
            uid: authUser.user.uid,
            email: authUser.user.email,
            name,
            schedule: JSON.parse(schedule),
            address: placeAddress,
            coordinates: new this.props.firebase.firestore
                .GeoPoint(placeLocation.lat(), placeLocation.lng()),
        });
    };

    this.props.firebase
        .doCreateUserWithEmailAndPassword(email, passwordOne)
        .then((authUser) => Promise.all([createUserData(authUser), createVenueData(authUser)]))
        .then(() => {
            this.setState({ ...INITIAL_STATE });
            this.props.history.push(ROUTES.HOME);
        })
        .catch((error) => {
            this.setState({ error });
        });

    event.preventDefault();
}

这是我传递的父组件中的渲染函数onSubmit

render() {
    console.log("ON SUBMIT");
    console.log(this.onSumbit);
    console.log(this.handleInputChange);
    return (
        <SignUp
            handleInputChange={this.handleInputChange}
            validate={this.validate}
            validationSchema={signUpSchema}
            onSumbit={this.onSumbit}
            addressRef={this.addressRef}
            error={this.state.error}
        />
    );
} 

标签: javascriptreactjs

解决方案


推荐阅读