react 踩坑，项目中的报错，警告以及解决办法
1.Nested block is redundant no-lone-blocks
？
2.Unexpected string concatenation of literals no-useless-concat
拼接字符串报错 "Unexpected string concatenation"
错误原因：ESLint推荐用ES6方法来拼接字符串，而不能使用加号。
解决办法：拼接字符串使用形如：
`字符串字符串字符串${变量名}字符串字符串字符串${返回字符串的方法}字符串字符串`的写法。
3.series not exists. Legend data should be same with series name or data name.
4.React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps （同：7.React Hook useEffect has a missing dependency: 'getList'. Either include it or remove the dependency array）
这不是JS / React错误，而是eslint警告。它告诉你钩子依赖于函数fetchBusinesses，所以你应该把它作为依赖传递。
1.useEffect(() => {
fetchBusinesses();
}, [fetchBusinesses]);
如果fetchBusinessess在运行中没有组件，那将不会真正改变任何事情，但警告将消失。
2.useEffect(() => { // other code ... // eslint-disable-next-line react-hooks/exhaustive-deps }, [])参考文章：https://www.soinside.com/question/yyxQ6i8PKsVyaS3teSftxH
5.Assign object to a variable before exporting as module default import/no-anonymous-default-export
原代码：
export default {
errorToast,
successToast,
};
解决方案：
const user = { user: {} }
export default user;6.Unnecessary escape character: \-
禁用不必要的转义字符; \-
原因：let reg = /^([a-zA-Z]|[0-9])(\w\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
改为：let reg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/7.Imported JSX component RenderPack_Expense must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case
解决方案：React发现了带下划线的组件命名，将带下划线的组件命名改为驼峰命名即可
8.The href attribute is required for an anchor to be keyboard accessible.Provide a valid, navigable address as the href value.If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles.Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
添加配置：
在package.json文件中添加如下代码
"eslintConfig": {
"extends": "react-app",
"rules":{
"jsx-a11y/anchor-is-valid":"off"
}
}
修改代码为： <a href="">{text}</a>参考文章：https://blog.csdn.net/weixin_34029680/article/details/91434946
9.warning Array.prototype.map() expects a return value from arrow function array-callback-return
map循环，报警告Expected to return a value in arrow function
意思是缺少return返回值
解决方案：
使用forEach代替map，因为ESlint报这个警告是因为map, filter , reduce 需要返回值
也可以使用map,在react中用jsx的方式，直接把{}改成()
10.Nested block is redundant no-lone-blocks
在 ES6 之前的 JavaScript 中，由花括号分隔的独立代码块不会创建新的作用域，也没有用处。
在 ES6 中，如果块级绑定（let和const），类声明或函数声明（以严格模式）存在，则代码块可能会创建新范围。在这些情况下块不被认为是多余的。
此规则旨在消除脚本顶层或其他块中不必要的和可能混淆的块。
此规则的错误代码示例：
/*eslint no-lone-blocks: "error"*/
{}
if (foo) {
bar();
{
baz();
}
}
function bar() {
{
baz();
}
}
{
function foo() {}
}
{
aLabel: {
}
}
使用 es6 环境的此规则的正确代码示例：
/*eslint no-lone-blocks: "error"*/
/*eslint-env es6*/
while (foo) {
bar();
}
if (foo) {
if (bar) {
baz();
}
}
function bar() {
baz();
}
{
let x = 1;
}
{
const y = 1;
}
{
class Foo {}
}
aLabel: {
}
通过 ESLint 配置或代码中的指令使用es6环境和严格模式通过此规则的正确代码示例："parserOptions": { "sourceType": "module" }"use strict"
/*eslint no-lone-blocks: "error"*/
/*eslint-env es6*/
"use strict";
{
function foo() {}
}
11.index.js:1 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
原因：官方文档说：这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。
就是直接在Form标签里面添加form={form},确实解决问题这个报错的问题了。
12.Warning: Same `value` exist in the tree: undefined
？
13.index.js:1 Warning: Each child in a list should have a unique “key“ prop.Check the render method of 'Body'. See httpes://reactjs.or/link/warning-keys for more information. at BodyRow
分页，报错解决方式如图：（rowKey为每一项的唯一字段名）
在table组件里面写上rowKey属性
rowkey = {record => record.id}
id 为表格数据中已有的字段
14.Warning: Cannot update a component (`ReportComponents`) while rendering a different component (`BodyRow`). To locate the bad setState() call inside `BodyRow`, follow the stack trace as described in
