react18踩坑记录

一、react-router-dom5中,跳转路由地址刷新页面不刷新问题

解决方法：打开index.js根文件，将 React.StrictMode组件删掉，就可以解决了。
React.StrictMode是开发中的严格模式，不会影响生产环境，详情可以参考 https://blog.youkuaiyun.com/wu_xianqiang/article/details/113521191

二、react-router-dom6中Uncaught Error: useNavigate() may be used only in the context of a <Router> component.

解决办法：
必须在index.js入口文件处将Router组件套在最外面，我就是写在了App组件里报的错

三、react-router-dom6嵌套路由正确写法

父级路由应该在路径后加*，例如/admin/*
子级路由不应该有/，纯字母命名即可

四、使用antd的table时Each child in a list should have a unique “key” prop

解决：使用table提供的rowkey属性

五、useState更新数据，怎么等待更新完成再执行

useState是异步的，不像类组件中setState有异步挂钩，需要我们手动加一个useEffect来监听修改的数据

六、react中使用useRoutes注册路由，跳转children子路由不显示

解决方法：在你的父级路由中放入路由入口

import { Outlet } from 'react-router'

export default function Layout () {
  return (
    <>
      父级路由
      <Outlet></Outlet>
    </>
  )
}

七、Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

原因：使用了lazy路由懒加载，却没有加Suspense做未加载完成的处理

import { DotLoading } from 'antd-mobile'

function App () {
  return (
    <Router>
      <Suspense fallback={<DotLoading />}>
        <RenderRouter></RenderRouter>
      </Suspense>
    </Router>
  )
}

八、类型“JSX.IntrinsicElements”上不存在属性“articleItem”

引入的组件名未大写

九、类型“ThunkAction<any>”的参数不能赋给类型“AnyAction”的参数。

原因：使用react-redux8版本中使用 createAsyncAction报的错
解决：createAsyncAction返回值 as any，不会影响我们的类型提示，只是告诉他跳过这层检查

import type { AppStore } from '../store';
import type { Dispatch } from '@reduxjs/toolkit';

type ThunkAction<T = any> = (dispatch: Dispatch, state: AppStore['getState']) => Promise<T>;

export const createAsyncAction = <T = any, R = any>(cb: (arg: T) => ThunkAction<R>) => {
  return cb as any;
};

十、React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array.

原因：在useEffect中调用使用到变量的函数， 只是一个eslint警告，不会影响功能
解决：
1、使用useCallback改写优化
2、在依赖项代码前一行加入eslint跳过检查注释
// eslint-disable-next-line react-hooks/exhaustive-deps

const getArticleList = useCallback((key: string) => {
    return dispatch(
      getArticleListAsync({
        channel_id: Number(key),
        timestamp: new Date().getTime()
      })
    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])