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

Question

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

该函数未定义，来自 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)
            }
        )

完整来源在这里