我正在try 做一个错误捕捉器在打字脚本,使用ErrorBoundary组件.坦率地说,我不明白,我应该使用什么propsinterface属性来实现与我现在正在学习的ZTM课程的任务中表示的目标相同的目标.最初的任务是在脚本,然而我的目标是使相同的应用程序的类型,而不是使用any类型.

我的render()方法有一个定制的ErrorBoundary标记,当错误出现在我的CardList组件中时,它应该会捕获错误.render()的代码如下:

render() {
    const { robots, searchfield } = this.state;
    const fileteredRobots = robots.filter(robot => {
        return robot.name.toLowerCase().includes(searchfield.toLowerCase())
    })
    return !robots.length ?
        <h1>Loading</h1> :
        (
            <div className='tc'>
                <h1 className='f1'>RoboFriends</h1>
                <SearchBox title='search box' searchChange={this.onSearchChange}/>
                <ErrorBoundary title='error catcher'>
                    <Scroll title='scrolling'>
                    <CardList title='list of robot cards' robots={fileteredRobots} />
                    </Scroll>
                </ErrorBoundary>
            </div>
        );
    }

此代码块中出现的错误如下所示:

Type '{ children: Element; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<{ title: string; }>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<{ title: string; }>'.ts(2322)

ErrorBoundary.tsx中的组件ErrorBoundary的代码如下:

import { Component } from "react";

interface IErrorBoundaryProps {
    hasError: boolean;
    children?: JSX.Element | JSX.Element[];
}

class ErrorBoundary extends Component<{title:string}, IErrorBoundaryProps> {
    constructor(props: {title:string}) {
        super (props)
        this.state = {
            hasError: false,
        }
    }

    render () {
        if (this.state.hasError) {
            return <h1>Ooops. That is an Error</h1>
        }
        return this.state.children
    }
}

export default ErrorBoundary

我修复了ErrorBoundary组件中的一些错误,但是在我的App.tsx render()方法中仍然得到了上面的错误.

我的主要问题是:如何修复我的render()方法中发生的错误?

推荐答案

这里有几件事正在发生.

  1. 你把props 和国家搞混了.你的titlechildrenpropshasError是州.但是您在一种类型中有title,在另一种类型中有hasErrorchildren,并且您已经在需要state类型参数的地方使用了类型IErrorBoundaryProps.

  2. Reaction组件中children的正确类型是ReactNode.

以下是一个没有错误的精简版本:

import React, { Component, ReactNode } from "react";

interface IErrorBoundaryProps {
    title: string;
    children?: ReactNode;
}

interface IErrorBoundaryState {
    hasError: boolean;
}

// This one is props −−−−−−−−−−−−−−−−−vvvvvvvvvvvvvvvvvvv
class ErrorBoundary extends Component<IErrorBoundaryProps, IErrorBoundaryState> {
// This one is state −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^
    constructor(props: { title: string }) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    render() {
        if (this.state.hasError) {
            return <h1>Ooops. That is an Error</h1>;
        }
        return this.props.children; // ** Use `props` here
    }
}

class Example extends Component {
    render() {
        return (
            <ErrorBoundary title="error catcher">
                <div>Error stuff here</div>
            </ErrorBoundary>
        );
    }
}

Playground link

Also,请注意您的ErrorBoundary组件还不是error boundary,因为它不实现static getDerivedStateFromError()componentDidCatch(),但我猜您稍后会添加这一点……

Typescript相关问答推荐

在Angular中注入多个BrowserModules,但在我的代码中只有一个

从typescript中的对象数组中获取对象的值作为类型'

如何在使用`Next—intl`和`next/link`时导航

单击并移除for循环中的一项也会影响另一项

为什么我的条件类型不能像我预期的那样工作?

在数据加载后,如何使用NgFor在使用异步管道的可观测对象上生成子组件?

Angular文件上传到Spring Boot失败,多部分边界拒绝

是否将自动导入样式从`~/目录/文件`改为`@/目录/文件`?

常量类型参数回退类型

在Cypress中,您能找到表格中具有特定文本的第一行吗?

映射类型不是数组类型

是否可以将类型参数约束为不具有属性?

如何创建允许使用带有联合类型参数的Array.from()的TS函数?

在类型{}上找不到带有string类型参数的索引签名 - TypeScript

为什么 TypeScript 类型条件会影响其分支的结果?

对于通过 Axios 获取的数据数组,属性map在类型never上不存在

为什么在 useState 中设置 React 组件是一种不好的做法?

类型string不可分配给类型string| 联盟| 的'

设置 --noImplicitAny 时,Typescript 编译器未标记返回 Any 的函数

react 嵌套的手风琴父级不更新高度