React报错集合篇

1. Typo in static class property declaration react/no-typos

问题： 大小写写错
解决：

应改为小写 PriceList.propTypes

---

2. jsx-a11y/anchor-is-valid

问题：锚链接缺少可访问性，需要添加有效的，可导航的地址。
解决：
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.

问题：
引用子组件出现问题
解决：
因为导致引用问题的原因很多，可以使用排除法，将觉得可能引起报错的被引用子组件之外的其他组件暂时注释掉。看到底是哪个组件报错，然后调试

---

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.

问题:
用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.

问题:
在 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

问题: 希望赋值或引入函数, 来代替表达式

解决: 如上