zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Atitit  atiMail atiDns新特性 v2  q39
    Atitit  atiMail atiDns新特性 v2  q39
    Atitit.aticmd v4  新特性q39 添加定时器释放功能
    Atitit.aticmd v4  新特性q39 添加定时器释放功能
    Atitit. Atiposter 发帖机 新特性 poster new feature   v7 q39
    Atitit. Atiposter 发帖机 新特性 poster new feature   v7 q39
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31
    知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31无涯 - I
  • 原文地址:https://www.cnblogs.com/shine1234/p/14985688.html
Copyright © 2011-2022 走看看