在下面的代码中，我有一个名为 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)把所有这些放在一起，这是我认为接近你想要的东西的固定版本：
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 <></>
}