我正在使用流并从另一个组件传递状态。我正在使用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 /视图/ 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>
假设标题中建议的错误(必填字段具有值undefined
)和问题中的错误(无效类型string
,预期number
)略有不同,我将尝试解决后者。我会寻找RoiCalculator
检查prop
的business_size
不作为字符串传递的任何地方。例如,以下代码段会违反道具类型检查:
<RoiCalculator business_size="30" {...otherProps}/>
<RoiCalculator business_size={"30"} {...otherProps}/>
但这是正确的
<RoiCalculator business_size={30} {...otherProps}/>