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

Question

我想将一个方法从父组件传递给子组件。但是，该方法永远不会出现在子组件的 props 中。我不明白这有什么问题，这是在 React 中要做的绝对基本的事情，它就是行不通的。当然，它在应用程序代码库的大约数百个其他地方也能正常工作。有问题的方法是getVerificationStatus。它在子进程中被调用，作为调用verifyStripeProviderAccount 返回的承诺的后续行动。子组件还有 5 个由 HOC 传入的其他道具，它们都可以工作，只是这一个父道具由于某种原因根本没有被注入。

函数未定义，所有其他来自 redux、stripe 等的道具都存在，我得到的错误是：“TypeError: this.getVerificationStatus is not a function 在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}
      />

那么Form（子组件）就是这样使用它的

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

完整来源是here