reactjs - 函数未作为道具传递给 React 中的子组件
问题描述
我想将一个方法从父组件传递给子组件。但是,该方法永远不会出现在子组件的 props 中。我不明白这有什么问题,这是在 React 中要做的绝对基本的事情,它就是行不通的。当然,它在应用程序代码库的大约数百个其他地方也能正常工作。有问题的方法是getVerificationStatus
。它在 child 中被调用,作为调用返回的承诺的后续行动verifyStripeProviderAccount
。子组件还有 5 个由 HOC 传入的其他 props,它们都可以工作,只是由于某种原因根本没有注入这一个父 props。
该函数未定义,所有其他来自 redux、stripe 等的道具都存在,我得到的错误是:“TypeError: this.getVerificationStatus is not a function at http://localhost:3000/static/js/main.块.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);
解决方案
发生这种情况是因为调用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);
推荐阅读
- javascript - 使用 JavaScript 从按钮单击接收事件时调用 URL
- c# - 视频上传“只会上传 30 秒的视频”
- lua - 在 Windows 下使用 Lua 沙箱和 MediaWiki
- vue.js - Vue 3 CLI 笑话测试 - MatchInlineSnapshot 不起作用?
- r - R 错误:x[[jj]] <- v 中的错误:运行函数时尝试在 integerOneIndex 中选择少于一个元素
- docker - Docker 拉失败/Gitlabci
- varnish - 如何指示 varnish 根据响应头数据生成缓存键
- node.js - 从 bcypt 哈希中获取原始数据
- visual-studio-2010 - 文件名中没有拼写错误,但无法在 python 中读取文件
- python - 如何修复 Python NetCat 克隆中的属性错误?