React

1、无限循环

报错：

Too many re-renders. React limits the number of renders to prevent an infinite loop...

3种导致React无限循环的方式

原因： 可能是直接在render方法或函数式组件的主体里使用了setState更新状态

或者可以不用setState钩子，条件判断后给变量直接赋值

2、数组无法识别length方法

报错：

Cannot read properties of undefined (reading 'length')

Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案

判断是数组并且长度大于0

解决：在使用length时判断数组是否存在

    if (array?.length) {
      setData(array.length)
    }

报错： Cannot read properties of undefined (reading '0')

需要显示的数据是通过异步方法拿到的，一开始在初始数据为空，报错是因为在显示初始数据的时候报错

在控制台点击报错信息，定位到代码中发现：接口返回数据的过程中 arrayOne不一定有数据，可能为空数组。

  useEffect(() => {
    if (data) {
      setValue(data as any);
      //报错
      setItemId(data.arrayOne[0].itemId);
    }
  }, [data]);

需要加上对数组长度的判断： setItemId(data.arrayOne?.length && data.arrayOne[0].itemId);

Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案

3、map遍历失败

报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

map遍历报错

原因： 第一次页面渲染的时候，map的对象是undefined，所以在前面加个判断，当有值时再去遍历

4、useState异步更新

react使用usestate踩坑

React中setState不起作用的情况

react hooks使用useState修改引用类型的值，视图无法更新

useState异步回调的问题：对数据进行更新时，不能立刻获取到最新的数据。

    let [AppointId, setAppointId] = useState(null);

    const cancelAppoint = (id) =>{
    //此处的setAppointId没有生效
      setAppointId(id);
      confirm({
        content: '弹框内容',
        okText: '是',
        cancelText: '否',
        //所以直接传递该变量
        onOk: () => sureMoadl(id),
      });
    }
    
    const sureMoadl = (id) =>{
        console.log('AppointId:',AppointId)  //null
        console.log('id:',id)  
    }

5、useEffect使用接口数据

似懂非懂也不知道该怎么描述，useEffect的依赖项填的是从接口获得的数据，但调用接口获取数据是个异步操作，在还没有返回结果的时候，其中的数据为空?...，解决：去掉了useEffect的使用

6、Uncaught Invariant Violation: Rendered more hooks than during the previous render

hook两次渲染的次数不一样。此次碰到该报错是因为，将useEffect写在了一个条件判断的return后面。

解决：将useEffect写在顶层。

不要在循环，条件或嵌套函数中调用 Hook， 确保Hook总是在 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。 Hook规则

7、"A cross-origin error was thrown. React doesn't have access to the actual error object in development. "

JSON.parse(xxx) ，多半是这个问题导致的。对应的处理方式可以采用try catch捕获异常

  function parse(v: any) {
    if (v) {
      try {
        return JSON.parse(v);
      } catch (error) {
        return v;
      }
    }
  }

TS

1、不能将类型“void”分配给类型“((...args: any[]) => any) | undefined”。

onOk: sureMoadl(id)——>onOk: () => sureMoadl(id)

类型限制：

onOk?: (...args: any[]) => any;

const sureMoadl: (id: any) => void

2、Trailing comma not allowed

去掉提示行的尾随逗号