Hello everyone who came to help. The code compiles and works, but TypeScript throws an error that Property 'id' does not exist on type 'number'. If you look deep into the hook, you can see that the step property is of type number in its interface.
The error occurs in this entry: step.id
import React, { useEffect, useState } from 'react'
import FirstStep from './steps/firstStep'
import {useForm, useStep} from 'react-hooks-helper'
interface IDefaultData2 {
id: string
}
const steps : any = [
{id: 'firstStep'},
{id: 'secondStep'},
{id: 'thirdStep'},
{id: 'confirm'},
{id: 'success'}
]
const UserForm: React.FC = () => {
const {step, navigation} = useStep({
steps,
initialStep: 0
})
console.log(typeof(step)) // object
console.log(typeof(step.id)) // string
console.log(step.id) // "firstStep"
return (
<>
{
(() => {
switch(step.id){
case 'firstStep': return <FirstStep/>
}
})()
}
</>
)
}
export default UserForm
What doesn't it like?
SOLUTION:
interface useStepType {
step: any,
navigation: any,
}
From
const { step, navigation } = useStep({
steps,
initialStep: 0
})
To
const { step, navigation }: useStepType = useStep({
steps,
initialStep: 0
})
Special thanks to Tomas Gonzalez
So the issue is that you are setting step as an object and not as a number,
to solve this create a new interface for type step:
interface stepType {
id: string,
}
interface useStepType {
step: stepType,
navigation: any,
}
and then try to set the step to this type
const {step, navigation}: useStepType = useStep({
steps,
initialStep: 0
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加