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

  • 相关阅读:
    UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例
    Android aidl Binder框架浅析
    AIDL
    android 五种存储方式
    Android进程间通信机制
    Service全面总结
    Android平台中关于音频播放
    Android广播机制
    Cursor,CursorAdapter中的观察者模式解析
    ContentProvider和Uri详解
  • 原文地址:https://www.cnblogs.com/shine1234/p/14985688.html
Copyright © 2011-2022 走看看