React学习-加载和错误处理

Posted 2021-09-05 火腿肠烧烤大赛冠军

普通设置错误

定义错误变量：

  const [isLoading, setIsLoading] = useState(false);
  const [error,setError] = useState<null | Error>(null);

在函数中使用：

  useEffect(() => {
    setIsLoading(true);
    client("projects", {
      data: clearnObject(debounceParam),
    })
      .then(setList).catch(error=>{
        setList([])
        setError(error)
      })
      .finally(() => {
        setIsLoading(false);
      });

    // fetch(`${apiUrl}/projects?${qs.stringify(clearnObject(debounceParam))}`).then(async res => {
    //     if(res.ok){
    //         setList(await res.json());
    //     }
    // });
  }, [debounceParam]); // eslint-disable-line react-hooks/exhaustive-deps

在页面中使用：

  return (
    <div>
      <SearchPanel users={users} param={param} setParam={setParam} />
      {error?<Typography.Text type = {"danger"}>{error.message}</Typography.Text>:null}
      <List loading={isLoading} users={users} dataSource={list} />
    </div>
  );

泛型使用：

泛型类：

如上，表示传递一个T类型，在new的时候才把具体类型传入。其中T是变量可改，但通常比较常见就是写T
之前说TypeScript类型的时有说到数组，其实数组本质就是一个泛型类

class Person<T>{
    private _value: T;
    constructor(val: T) {
        this._value = val;
    }
}
let p = new Person<number>(12)

泛型函数：

• 第一个T是接收identity的形参
• 第二个T是函数中arg形参的类型约束
• 第三个T是对函数返回值的约束

异常边界处理

import React, { ReactNode } from "react";
type fallbackRender = (props: { error: Error | null }) => React.ReactElement;
export class ErrorBoundary extends React.Component<
  React.PropsWithChildren<{ fallbackRender: fallbackRender }>,
  { error: Error | null }
> {
    state = {error:null}
    // 当上述方法发生错误就会被调用
    static getDerivedStateFromError(error:Error){
        return {error}
    }
    render(){
        const {error} = this.state;
        const {fallbackRender,children} = this.props
        if(error){
            return fallbackRender({error})
        }
        return children
    }
}