Vite+React+Ts踩坑及细碎知识

使用工具

WebStorm

项目搭建

npm create vite@latest <name> -- --template react-ts

其中<name>为创建的项目名称

报错

1. 对于一些数据，若类型不明确，则在获取该数据内的键时容易报错，此时可以采取的方法为索引器访问，如下方代码：

                 messages.map(function(value,index){
                    const getChildrenInformation=(id:number)=>{
                        showModal();
                        setDeleteId(id);
                        setDeleteName(value["name"])
                    }
                    return (
                        <CardComponent id = {value["id"]} name={value["name"]} introduction={value["description"]} key={index} sendFather={getChildrenInformation} num={index}/>
                    )
                })

其中value["name"]即为获取value这个数据中键为name的数据的值。注意，不可以使用value.name这种方式，会报错

细节问题

1. 对于有严格先后顺序关系的操作，如需要确保数据更新或删除成功后再执行useEffect中的reload，可以使用aysnc和await结合的方法，如下：

    const handleOk = async () => {
        await delet(deleteWordId);
        setIfReload(!ifReload);
        setIsModalOpen(false);
    };

上面代码中delet方法前加了await，那么setIfReload方法一定会在delet之后执行，这样页面的逻辑就是正确的。

2. 报错：Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'

若该报错位于代码的逻辑部分（不涉及页面渲染），则可以使用// @ts-ignore（一般不会产生什么问题）

若位于组件的return 部分，无法使用// @ts-ignore，则可以为报错的函数添加默认参数，如下:

parseInt(search.get('type')|| '0')

search.get('type')可能为null，但此时不会报错，因为编译器会读取'0'作为parseInt的参数

3.可以为useState设置类型，从而表明对应元素的数据类型，如下：

    interface Option {
        value: number;
        label: string;
        children?: Option[];
    }

const[stateOptions,setStateOptions] = useState<Option[]>()

这样就表示stateOptions是Option类型的数组

4. React对于一个数组或对象的更新需要遵循不可变性，即需要在更新旧数据的同时创建旧数据的副本，同时更新需要修改的位置，举例如下：

        setStateOptions(prev=>{
            const newStateOptions:any = [...prev]
            newStateOptions[cascaderCount] = [
                {
                    "value": 1,
                    "label": 'State1',
                },
                {
                    "value":2,
                    "label":"State2"
                }
            ]
            return newStateOptions
        })

上述代码可能报错为：

TypeError: prev is not iterable

这表明在尝试使用展开操作符[...prev]时，prev不是一个可迭代对象。这通常发生在prev不是数组的情况下。这个错误提示可能意味着在某些情况下stateOptions的初始值或当前值不是预期的数组类型。

为了避免该错误，解决措施为给目标数据设置初始类型为数组（不管是目标数据是几维数组都可以设置为一个空数组），如下：

const[stateOptions,setStateOptions] = useState<Option[][]>([])