Question

我想将方法从父组件传递给子组件。但是，该方法永远不会出现在子组件的属性中。我不明白这是怎么回事，这是React中要做的绝对基本的事情，只是行不通。当然，它可以在应用程序代码库中的其他数百个地方正常工作。有问题的方法是getVerificationStatus。它作为调用verifyStripeProviderAccount返回的promise的后续措施在child中被调用。子组件还具有由HOC传递的其他5个prop，它们都起作用，只是出于某种原因而没有注入仅此一个父prop。

该函数未定义，来自redux，stripe等的所有其他道具都存在，并且我得到的错误是：“ TypeError：this.getVerificationStatus不是一个函数在http://localhost:3000/static/js/main.chunk.js:8837:16“

下面是代码，但为简洁起见，我删除了一些不相关的部分。父母：

import {getUserVerificationStatus} from "../services/UserService";

class VerifyAccount extends Component {

    state = {
        verificationStatus: VerificationStatus.UNVERIFIED
    };

    componentDidMount() {
        this.getVerificationStatus();
    };

    getVerificationStatus = () => {
        if (this.props.user.paymentProcessorId) {
            getUserVerificationStatus()
                .then(response => this.setState({
                    ...this.state,
                    verificationStatus: response.status || this.state.verificationStatus
                }));
        }
    };

    render() {
        return <Card>
                {this.state.verificationStatus === VerificationStatus.UNVERIFIED && (
                    <VerificationSteps getVerificationStatus={this.getVerificationStatus}/>
                )}
                {this.state.verificationStatus === VerificationStatus.PENDING && (
                    ...
                )}
            </Card>;
    }
}

const mapStateToProps = state => {
    return ...
};

const mapDispatchToProps = (dispatch) => {
    return ...
};

const StripeVerifyAccount = compose(
    withAuthentication,
    withUserType(UserType.PROVIDER),
    injectStripe,
    withStyles(styles, {withTheme: true}),
    injectIntl,
    connect(mapStateToProps, mapDispatchToProps),
)(VerifyAccount);

export default () => {
    return <>
        <Elements>
            <StripeVerifyAccount/>
        </Elements>
    </>;
}

孩子：

import {verifyStripeProviderAccount} from "../services/UserService";

class VerificationSteps extends Component {

    state = {...}

    handleSubmit = event => {
        event.preventDefault();

        verifyStripeProviderAccount(body)
            .then(errors => {
                if (errors) {
                    this.props.emitError("verification_documents_error", 5000);
                } else {
                    this.props.getVerificationStatus();
                    this.setState({
                        ...this.state,
                        loading: false,
                        success: true
                    });
                }
            })
            .catch(err => {
                this.setState({
                    ...this.state,
                    loading: false
                });
                this.props.emitError("verification_error")
            });
    };

    render() {
        return <some stuff, not important>
    }

}

const mapStateToProps = state => {
    return ...
};

const mapDispatchToProps = (dispatch) => {
    return ...
};

export default compose(
    withAuthentication,
    withUserType(UserType.PROVIDER),
    injectStripe,
    injectIntl,
    connect(mapStateToProps, mapDispatchToProps),
)(VerificationSteps);

Answer 1

发生这种情况是因为对verifyStripeProviderAccount()的调用不在您的子类的方法之内，因此this当时没有正确初始化。我什至希望您实际上有语法错误。

尝试：

import {verifyStripeProviderAccount} from "../services/UserService";

class VerificationSteps extends Component {

state = {...}

async componentDidMount(){
    verifyStripeProviderAccount(body)
            .then(errors => {
                if (errors) {
                    ...
                } else {
                    this.props.getVerificationStatus();
                    this.setState({
                        ...
                    });
                }
            })
            .catch(err => {
                this.props.emitError("verification_error")
            });
}

render() {
        return <some stuff, not important>
    }
}

const mapStateToProps = state => {
    return ...
};

const mapDispatchToProps = (dispatch) => {
    return ...
};

export default compose(
    withAuthentication,
    withUserType(UserType.PROVIDER),
    injectStripe,
    injectIntl,
    connect(mapStateToProps, mapDispatchToProps),
)(VerificationSteps);

Answer 2

在父组件中，我有

    setPerson = (person) => {
    this.setState({
        person: person
    })
}

我像这样将其传递给表单组件

     <EditLinkForm
         person_id={this.state.person.id}
         link_id={this.state.link_id}
         link_name={this.state.link_name}
         link_url={this.state.link_url}
         setPerson={this.setPerson}
      />

然后这就是表单（子组件）的使用方式

       axios.post(process.env.REACT_APP_API_URL + '/admin/edit_link/',
        postData,
        AuthenticationService.getAxiosConfig()
        )
           .then(response => {
                this.props.setPerson(response.data.person)
            }
        )

完整来源为here

函数未作为prop传递给React中的子组件

2 个答案: