Tag Archives: js

[Solved] UMI Project Error: uncaught at _callee3 at _calle3

1. If it is just a react project and the DVA framework is introduced, an onerror attribute will be passed in when calling the DVA method

const app = dva({
	onError(err) {
		// error
		console.log(err);
	},
});

2. If you are using the UMI framework, you cannot find the place where the DVA is called. Create a new app.js file in the SRC directory and write the following contents

export const dva = {
  config: {
    onError(e) {
      e.preventDefault();
      console.error(e.message);
    },
  },
};

Such a simple serialization system.text.json.serialization also reports an error?

Consulting area

kofifus：

I am going to switch json.net in the project to the native system. Text. JSON , but I encountered an unexpected error. The test code is as follows:


using System.Text.Json.Serialization;
using Newtonsoft.Json;

public class C {
  public C(string PracticeName) { this.PracticeName = PracticeName; }
  public string PracticeName;
}

var x = new C("1");
var json = JsonConvert.SerializeObject(x); // returns "{\"PracticeName\":\"1\"}"

var x1 = JsonConvert.DeserializeObject<C>(json); // correctly builds a C

var x2 = System.Text.Json.Serialization.JsonSerializer.Parse<C>(json);

The last line of the above code will report:


Exception thrown: 'System.NullReferenceException' in System.Text.Json.dll Object reference not set to an instance of an object.

What did I do wrong?

I found that this problem can be solved by parameterless constructor , but doing so will put the cart before the horse. Is there a flexible way to realize the simple functions that can be realized by JSON. Net .

Answer area

Christian Gollhardt：

In the . Net core 3.0 stage, the development of system. Text. JSON has not been completely completed. At present, only nonparametric constructor is supported, which may be supported in the future.

If you are migrating the old version to . Net core 3.0 , I still suggest you use newtonsoft. JSON .

    MVC

Install the microsoft.aspnetcore.mvc.newtonsoftjason package from nuget and inject it into the Services container.


services.AddMvc().AddNewtonsoftJson();
    SignalR:

InstallMicrosoft.AspNetCore.SignalR.Protocols.NewtonsoftJson package from Nuget


//Client
new HubConnectionBuilder()
.WithUrl("/chatHub")
.AddNewtonsoftJsonProtocol(...)
.Build();

//Server
services.AddSignalR().AddNewtonsoftJsonProtocol(...);

In this way, you can use json.net in . Net core 3.0 .

user11400447：

To solve this problem, you must make two changes:

praccename

    1. should be made into an attribute, not a field. Use a parameterless constructor

I wrote a console program, in which C1 is converted through newtonsoft. JSON , and C2 is converted through system. Text. JSON .


using Newtonsoft.Json;

namespace TestJsonParse
{
    class Program
    {
        static void Main(string[] args)
        {
            var c1 = new C1("1");
            var json1 = JsonConvert.SerializeObject(c1); // returns "{\"PracticeName\":\"1\"}"
            var x1 = JsonConvert.DeserializeObject<C1>(json1); // correctly builds a C1

            var c2 = new C2();
            string json2 = "{\"PracticeName\":\"1\"}";
            var x2 = System.Text.Json.Serialization.JsonSerializer.Parse<C2>(json2); // correctly builds a C2
        }

        class C1
        {
            public C1(string PracticeName) { this.PracticeName = PracticeName; }
            public string PracticeName;
        }

        class C2
        {
            public C2() { }
            public string PracticeName { get; set; }
        }
    }
}

Comment area

Times have changed. I’ve finished system.text.jason, and then I used the latest. Net 5 digression code.


namespace ConsoleApp3
{
    class Program
    {
        static void Main(string[] args)
        {
            var json = "{\"PracticeName\":\"1\"}";

            //json.net
            var x1 = JsonConvert.SerializeObject(json);

            //System.Text.Json
            var x2 = System.Text.Json.JsonSerializer.Deserialize<C>(json);

        }
    }

    public class C
    {
        public C(string PracticeName) { this.PracticeName = PracticeName; }
        public string PracticeName;
    }
}

The result is…. Continue to report errors…

What else can I say

Solve Google browser font reduction to 12px

The solution of browser font less than 12px

1. Zoom through transform: scale()

<div class="box text1">The font size is 12px</div>
<! -- inside before adding the span tag, because transform:scale scales the width and height of the outer div -->
<div class="box text2">
    <span> The font size is 8px</span> 
</div>
Copy code
.box{
    width: 200px;
    height:100px;
    margin-bottom: 10px; 
    border: 1px solid red ;
}
.text1{
    font-size: 12px;
}
.text2 span{
    display: inline-block;/*transform:scale()这This attribute scales only the elements whose width and height can be defined. */
    font-size: 16px;
    transform: scale(0.5) ;/* font-size: 16*0.5=8px  */
    transform-origin: left top;/* Adjustment of position*/
}

[Solved] TypeError: Converting circular structure to JSON – JSON.stringify

When using the json.stringify method to convert a string, an error typeerror: converting circular structure to JSON will be reported

Reason: there is a circular reference to itself in the object;

For example:

let test = { a: 1, b: 2 };
test.c = test; // Circular references
JSON.stringify(test); // report an error

Solution:
the following JSON_ STR is the converted String of JSON. Stringify 

var cache = [];
var json_str = JSON.stringify(json_data, function(key, value) {
    if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
            return;
        }
        cache.push(value);
    }
    return value;
});
cache = null;	//release cache

Anti card limited Drag Based on react draggable drag

Recently, a project requirement is to click the question mark to display the prompt window. The window is fixed, does not scroll with the scroll bar, and can be dragged within the scope. It does not affect the lower form input.

I think of using anti card combined with react draggable. Record the implementation code here:

import React from 'react';
import { Modal, Button, Card, Icon } from 'antd';
import Draggable from 'react-draggable';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cardShow: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 }, // Initialize drag boundary
        };
        this.draggleRef = React.createRef();
    }

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = this.draggleRef.current.getBoundingClientRect();
        this.setState({
            // Set the drag boundary to limit the dragging distance from the top, bottom, left and right of the initial position, the following setting is draggable in the browser window
            // If the page has a fixed display header, it must be draggable below the header, you can set top: -targetRect.top + uiData.y + height of the header.
            bounds: {
                left: -targetRect.left + uiData.x,
                right: clientWidth - 300,
                top: -targetRect.top + uiData.y,
                bottom: clientHeight - (targetRect.bottom - uiData.y),
            },
        });
    };

    onClickShow = () => {
        this.setState({
            cardShow: true,
        })
    }

    onClickClose = () => {
        this.setState({
            cardShow: false,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        })
    }

    render() {
        const {disabled, bounds, cardShow} = this.state;
        return (
            <div style={{width: '100%'}}>
                <Draggable
                    disabled={disabled}
                    bounds={bounds}
                    onStart={(event, uiData) => this.onStart(event, uiData)}
                >
                    <div ref={this.draggleRef}>
                        {cardShow &&
                        <Card
                            title={
                                <div
                                    style={{
                                        width: '100%',
                                        cursor: 'move',
                                    }}
                                    onMouseOver={() => {
                                        this.setState({
                                            disabled: false,
                                        });
                                    }}
                                    onMouseOut={() => {
                                        this.setState({
                                            disabled: true,
                                        });
                                    }}
                                    onFocus={() => {}}
                                    onBlur={() => {}}
                                >
                                    {'Title'}
                                </div>
                            }
                            extra={
                                <span onClick={() => this.onClickClose()}>
                                    <Icon type={'close'} style={{fontSize:'16px'}}/>
                                </span>
                            }
                            style={{ width: 300, position: 'fixed', zIndex: 999 }}>
                            <p>Conetent</p>
                        </Card>}
                    </div>
                </Draggable>
                <span >{'Help'}</span><Icon onClick={() => this.onClickShow()} type="question-circle" />
            </div>
        );
    }

}

Method to solve uncaught typeerror: cannot set property ‘onclick’ of null error

Problem analysis: this error occurs when the JS file is placed in the head tag and the onclick event is bound

reason:

W3school introduces that the browser loads the button node before executing JS. When the browser parses from top to bottom, the button node bound to onclick cannot be found

For example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Events</title> 
<script>
    var Btn = document.getElementById('btn');
    Btn.onclick = function(){    
        console.log("push the button ");        
    }
</script> 
</head> 
<body> 
   <button id="btn">Calculation</button> 
</body>
</html>

This error will appear, as shown in the following figure:

Solution 1: use the JS content in window ο nl ο Ad = function () {} wrap it up

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Events</title>
    <script>
        window.onload = function () {
            var Btn = document.getElementById('btn');
            Btn.onclick = function () {
                console.log("push the button ");
            }
        }
    </script>
</head>
<body>
    <button id="btn">Calculation</button>
</body>
</html>

Solution 2: load the JS file at the bottom

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Events</title>
</head>
<body>
    <button id="btn">Calculation</button>
    <script>
        var Btn = document.getElementById('btn');
        Btn.onclick = function () {
            console.log("push the button ");
        }
    </script>
</body>
</html>

Vue Error: initialize failed: invalid dom [How to Solve]

An error occurred when ecarts component was introduced into Vue project: “error: initialize failed:invalid dom. ”

I found that I didn’t reach that level at all. The problem I encountered was that I didn’t quote correctly. I split up. Xiaobai grew up in tears and blood. He didn’t talk much nonsense. Write an article and record it.

The main reason is that I didn’t understand the reference method of ecarts component. Here is my solution

<div id="a" style="height:80vh;width:100%" ref="b"></div>

There are two ways, one is Ref

let mychart = this.$echarts.init(this.$refs.b)

A way of using ID

this.$echarts.init(document.getElementById("a"))

The following is the complete code of the ecart component that I quoted. I have highlighted the mistakes I made. I hope it can help you.

<template>
  <div id="a" style="height:80vh;width:100%" ref="b"></div>
</template>
<script>
mounted() {
      this.init()

  },
 
  methods: {
      init(){
          let mychart = this.$echarts.init(this.$refs.b)
          // let mychart = this.$charts.init(document.getElementById("a"))
          //Here, I am the problem here, did not understand the whole id and ref relationship
          let optionline = {
              backgroundColor: '#f0f0f0',
    title: {
        text: 'Folding Line Chart',
        textStyle: {
            align: 'center',
            color: '#99CCFF',
            fontSize: 20,
        },
        top: '5%',
        left: 'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },
    },
    grid: {
        top: '15%',
        left: '5%',
        right: '5%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        axisLine: {
            show: true
        },
        splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: ['A', 'B', 'C', 'D', 'E', 'F'],

    }],

    yAxis: [{
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
                color: '#d1e6eb',

            },
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
            name: 'Total registration',
            type: 'line',
            // smooth: true, // whether smooth
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
                normal: {
                    color: "#6c50f3",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#6c50f3',
                }
            },
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(108,80,243,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(108,80,243,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(108,80,243, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
        },
        {
            name: 'Total registration',
            type: 'line',
            // smooth: true, // whether smooth
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
                normal: {
                    color: "#00ca95",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#00ca95',
                }
            },

            itemStyle: {
                color: "#00ca95",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,202,149,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,202,149,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(0,202,149, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
        },
    ]
          }
          mychart.setOption(optionline)
      }
  }
</script>