React报错集合篇

系统管理员 2022-12-04 02:23 227阅读 0赞

**1. Typo in static class property declaration react/no-typos**  
![在这里插入图片描述][20200905123841276.png_pic_center]  
问题： 大小写写错  
解决：  
![在这里插入图片描述][20200905124039528.JPG_pic_center]

应改为小写 PriceList.propTypes

--------------------

**2. jsx-a11y/anchor-is-valid**  
![在这里插入图片描述][20200905124329247.png_pic_center]  
问题：锚链接缺少可访问性，需要添加有效的，可导航的地址。  
解决：  
a标签或者需要加href的属性， 添加href。如果没法添加，建议使用其他标签

--------------------

**3. Warning: Failed prop type: The prop `items` is marked as required in `PriceList`, but its value is `undefined`.**

问题：  
类型检查报错， 没有传入必需的  
解决：  
查看类型检查是否符合要求

--------------------

**4. Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.**  
![在这里插入图片描述][20200906122138426.png_pic_center]  
问题：  
引用子组件出现问题  
解决：  
因为导致引用问题的原因很多，可以使用排除法，将觉得可能引起报错的被引用子组件之外的其他组件暂时注释掉。看到底是哪个组件报错，然后调试

--------------------

**5. Error: A React component suspended while rendering, but no fallback UI was specified.  
Add a component higher in the tree to provide a loading indicator or placeholder to display.**

![在这里插入图片描述][20200913114112663.png_pic_center]  
问题:  
用lazy 之后, 存在加载中的空档, react 不知道在这个空当中该显示什么, 所以需要我们指定

解决:  
用 suspense包裹组件,并传入组件实例或 jsx

--------------------

**6. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference.**

![在这里插入图片描述][20200924141429122.png_pic_center]  
问题:  
在 React 严格模式下引入的 antd 导致报错

解决:

ReactDOM.render(
      <React.StrictMode>
        <TodoList />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    StrictMode 改成 Fragment:
    
    ReactDOM.render(
      <React.Fragment>
        <TodoList />
      </React.Fragment>,
      document.getElementById('root')
    );

--------------------

**7. Expected an assignment or function call and instead saw an expression no-unused-expressions**

![在这里插入图片描述][20200927153857685.png_pic_center]  
问题: 希望赋值或引入函数, 来代替表达式

解决: 如上

[20200905123841276.png_pic_center]: /images/20221123/f7b1d50c04b04356ae602ffdff66a5db.png
[20200905124039528.JPG_pic_center]: /images/20221123/a0dd0cd5e2b54d4bac7beaa38e1fdfbb.png
[20200905124329247.png_pic_center]: /images/20221123/31f7b4fd368f40efae3b45e0a9937941.png
[20200906122138426.png_pic_center]: /images/20221123/f7f009e46cf448a3972655de65915d23.png
[20200913114112663.png_pic_center]: /images/20221123/2f9a5f71b9574a0db336a0642b0147e7.png
[20200924141429122.png_pic_center]: /images/20221123/6c95d51d7a8b4a66804a137765174358.png
[20200927153857685.png_pic_center]: /images/20221123/9c12de00195c4bb585583bf55c2c45cc.png