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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM