typescript - Typescript 对象可能是未定义的错误

在下面的代码中,我有一个名为 errorsLoaded 和 errors 的状态对象(分别是布尔数组和字符串数组)以及对 UseFetchErrors 的 api 调用,它在完成获取错误时返回一个字符串数组和一个真正的 value:

1 const ErrorsPage: React.FC<ExecutionTableProps> = () => {
2     const location = useLocation()
3     // @ts-ignore
4     this.state={
5         errorsLoaded: false,
6         errors: []
7                 }
8     //@ts-ignore
9     this.state.errors, this.state.errorsLoaded = useFetchErrors(location.state.project_scan_id)
10    //@ts-ignore
11    if (this.state.errorsLoaded){
12        // @ts-ignore
13        return(
14            <>
15                <NavigationBar/>
16                <TableContainer component={StyledPaper}>
17                    <StyledTableName>Errors:</StyledTableName>
18                    <Table size="small">
19                        <TableBody>
20                                <ul>
21                                    {this.state.errors.map(o => <li key={o}>{o}</li>)}
22                                </ul>
23                        </TableBody>
24                        </Table>
25                    </TableContainer>
26            </>
27        )

Typescript 让我 //@ts-ignore 状态对象的所有调用(我不确定如何在声明多个状态时绕过)。在第 21 行,我收到一个“对象可能未定义”错误,该错误无法通过 //@ts-ignore 来抑制。典型化errorsLoaded和错误的最佳方法是什么(我可以用this.state = {...}做到这一点)所以我没有得到这些错误?

回答1

您的代码被报告有类型错误,因为它有类型错误。事实上,它有许多非常严重的错误。

首先:

this.state={
  errorsLoaded: false,
  errors: []
}

您在功能组件中使用 this,这是无效的。这就是基于类的组件的模式。如果你想使用状态,你必须使用 useState 钩子和 store 局部变量的结果。

const [state, setState] = useState({ errorsLoaded: false, errors: [] })

但是,其次,如果您只有其他钩子返回的状态,那么您根本不需要状态。只需 store 钩子的结果并使用它。

const hookReturnValueHere = useFetchErrors(location.state.project_scan_id)

第三:

this.state.errors, this.state.errorsLoaded = useFetchErrors(location.state.project_scan_id)

我认为您正试图解构 useFetchErrors 的返回 value,它返回一个由两个 values 组成的数组。但是,这不是正确的语法,因为它缺少左侧的 [],并且您不能使用这种语法分配对象的属性(仅限新声明的变量)。

所以我认为你打算这样做:

const [errors, errorsLoaded] = useFetchErrors(location.state.project_scan_id)

把所有这些放在一起,这是我认为接近你想要的东西的固定版本:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCgeirgFoG7raBZFAayThgAsuwcAN2AATJCLhoIYuAHdo7CsAB2MJFEzouAUQAeSNAFcYwCMoAqKAEYAbJAAUcYAM5wA3gF8KYtDZRFJM2d4Q2ckABkINBQTMwAuOAAKAEo4AF4APnc4YJikBLc4AQgAKwMYAH1naOUK0QTgqBUAczgPNuZ6RgpvAz8AqWVguFCkADEkGDQebSgcKGcExPqcmCblZtTMuABtRpadgF0AGjgrCAg7FGVDnvJAofhZ+ed7FGb8xGIYADoxgGEADx6AzGUwWax2RwQFxZNJJLZZNwUOCo1GDYY2KIxcHpEZhSLRWLKFIotFwMlojHwHbqF6nOnQZyRFBiESHPGjCZTGZzJmJLFE8E-XJqH7FMoYKo1OoiZKUin3NHATBJRkLFls1LIpXk1FEGCGKAkhV6tGAww2DKms16tzq5w-EAoMCJCDpLKAmzAOCcACeaTcEA8GSDHkBVG9GWSXl1ttREct1rj5PlcdjCoNRuUcEBGQjyYzlHI1LgRGclvg8OBfIWbw+cCoGSAA

const ErrorsPage: React.FC<ExecutionTableProps> = () => {
    const location = useLocation() 
    const [errors, errorsLoaded] = useFetchErrors(location.state.project_scan_id)
    
    if (errorsLoaded) {
        return(
            <ul>
                {errors.map(o => <li key={o}>{o}</li>)}
            </ul>
        )
    }

    return <></>
}

相似文章