我正在使用流并从另一个组件传递状态。我正在使用proptypes和statetypes。如何解决此错误?警告:道具类型失败:提供给business_size
的类型string
的道具RoiCalculator
无效,预期number
。
在RoiCalculator中
webpack / roi_calculator / main.jsx
export type StateType = {
business_size: number,
organisation_name: string,
pay_period: boolean,
timesheet_savings: number,
roster_optimisation: number,
reduction_time: number,
elimination_award: number,
annual_savings: number,
annual_subscription: number,
roi: number,
}
export type PropsType = {
business_size: number,
organisation_name: string,
pay_period: boolean,
timesheet_savings: number,
roster_optimisation: number,
reduction_time: number,
elimination_award: number,
annual_savings: number,
annual_subscription: number,
roi: number,
}
export default class RoiCalculator extends
React.Component<PropsType, StateType> {
constructor (props: PropsType) {
super(props)
this.state = {
business_size: this.props.business_size,
organisation_name: this.props.organisation_name,
pay_period: this.props.pay_period,
timesheet_savings: 0,
roster_optimisation: 0,
reduction_time: 0,
elimination_award: 0,
annual_savings: 0,
annual_subscription: 0,
roi: 0,
}
}
<RoiAssumptions results={this.state}/>
webpack / roi_calculator / views / RoiAssumptions / index.jsx
export type PropsType = {
business_size: number,
organisation_name: string,
pay_period: boolean,
timesheet_savings: number,
roster_optimisation: number,
reduction_time: number,
elimination_award: number,
annual_savings: number,
annual_subscription: number,
roi: number,
}
const t = (key, ...args) => globalT(`js.roi_calculator.${key}`, ...args)
export default class RoiAssumptions extends
React.Component<PropsType, StateType> {
constructor (props: PropsType) {
super(props)
}
<div className={styles.aside__value}>
<p>$
{this.roundOffResult(this.props.results.timesheet_savings)}</p>
</div>
答案 0 :(得分:0)
确保标题中建议的错误(必填字段具有值undefined
)和问题中的错误(无效类型string
,预期的number
)稍有不同,我将尝试为后者解决。我会寻找在呈现RoiCalculator
的任何地方,检查prop
的{{1}}是否作为字符串传递。例如,以下代码段将违反道具类型检查:
business_size
这是正确的
<RoiCalculator business_size="30" {...otherProps}/>
<RoiCalculator business_size={"30"} {...otherProps}/>