1. Uncaught TypeError: Cannot read property

This can happen for a number of reasons, but a common one is improper state initialization when rendering UI components. Let’s look at an example of how this might happen in a real-world application. We’ll choose React, but the same principles of incorrect initialization apply to Angular, Vue, or any other framework.


class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res= > {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>); }}Copy the code

Here are two important things to realize:

· Component state (such as this.state) starts with undefined state.

· When you fetch data asynchronously, whether in the constructor componentWillMount or componentDidMount, the component will be rendered at least once before the data is loaded. This.state. items is undefined when Quiz first renders. This in turn means that ItemList will get undefined items and you’ll get an error in the console — “UncaughtTypeError: Cannot read property ‘map’ of undefined “. This is easy to fix, the simplest way: initialize the state with reasonable defaults in the constructor.

class Quiz extends Component {
  // Add this:
  constructor(props) {
    super(props);
    this.state = {
      items: [] / / the default value
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res= > {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>); }}Copy the code

The actual code in your application may be different, but I hope I’ve given you enough clues to fix or avoid this problem in your application. If not, read on, because I’ll cover more examples of related errors below.

2. TypeError: ‘undefined’ is not an object (evaluating)

3. TypeError: null is not an object (evaluating

Interestingly, null and undefined are not the same in JavaScript, which is why we see two different error messages. Undefined is usually an unallocated variable, while null indicates that the value is blank. To verify that they are equal, try using the strict equality operator.

One way this error can happen in a real-world example is to try to use a DOM element in JavaScript before loading the element, because the DOM API returns NULL for a blank object reference.

Any JS code that executes and processes A DOM element should be executed after the DOM element is created. The JS code is interpreted from top to bottom in HTML format, so if there is a tag before the DOM element, the JS code inside the script tag will be executed when the browser parses the HTML page. This error occurs if the DOM element has not been created before the script is loaded.

In this example, we can solve this problem by adding an event listener that will notify us when the page is ready. Once the addEventListener is triggered, the init() method can use DOM elements

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      varuserName = myTextfield.value; }}document.addEventListener('readystatechange'.function() {
    if (document.readyState === "complete") { init(); }}); </script><form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>
Copy the code

4. (unknown): Script error

To get a real error message, do the following.

Send the access-Control-allow-Origin header

Setting the access-Control-allow-Origin header to * indicates proper Access to resources from any domain. You can replace * with your domain as needed: for example, access-Control-allow-origin: www.example.com. However, dealing with multiple domains is complex and may not be worth the effort if caching issues are possible using a CDN.

Here are some examples of how to set this header in various environments:

Apache

In the folder where the JavaScript files will be provided, create a.htaccess file with the following contents:

Nginx

Add the add_header directive to the location block that provides the JavaScript file:

HAProxy

Add the following to the asset back end that provides JavaScript files:

Set Crossorigin = “anonymous” on the script tag

In your HTML source, for each script for which you set the Access-Control-Allow-Origin header, set Crossorigin =”anonymous” on the script tag. Before adding the Crossorigin attribute to the script tag, make sure you verify that the header has been sent for the script file. In Firefox, if the Crossorigin attribute exists but the Access-Control-Allow-Origin header is not present, the script will not be executed.

TypeError: Object doesn’t support property

This is an error that occurs in IE, and you can test it in the IE developer console when you call the method of undefined

This is equivalent to the Chrome error “TypeError: ‘undefined’ is not a function”. Yes, different browsers may have different error messages for the same logical error.

This is a common problem with Internet Explorer in JavaScript namespace-enabled Web applications, where 99.9% of the time the problem is that Internet Explorer cannot bind methods in the current namespace to the this keyword.

For example, if your JS namespace Rollbar uses the isAwesome method. In general, if you are in the Rollbar namespace, the isAwesome method can be called using the following syntax:

Chrome, Firefox, and Opera will happily accept this syntax. IE, on the other hand, does not. Therefore, the safest way to use a JS namespace is to prefix it with the actual namespace.

Transferred from: wechat public number - front-end expertCopy the code