Сообщение об ошибке React отличается для локальной машины и CodeSandbox

#reactjs #codesandbox

#reactjs #код и поле

Вопрос:

Я создал простое приложение, чтобы продемонстрировать проблему с вызовом функции с неправильным контекстом в компонентах класса React.

Вот сообщение об ошибке, которое я получаю на своем локальном компьютере:

И вот сообщение об ошибке, которое я получаю в CodeSandbox для той же ошибки:

Я понимаю, что обе эти ошибки указывают на одно и то же, но почему они показывают разные сообщения? Я убедился, что версии React и react-скриптов совпадают, так что проблема не в этом. Кроме того, я попытался загрузить код из CodeSandbox и запустить его локально, но все равно получил первое сообщение об ошибке.

Что это дает?

Вы можете увидеть песочницу здесь.

1. Вы переходите на ту же версию ES? Кроме того, какова вторая ошибка в CodeSandbox?

2. @zhulien Да, так и должно быть. Я добавил ссылку на песочницу в вопросе. Вы также можете попробовать загрузить файлы на свой компьютер и запустить их локально. Когда я запускаю его локально с той же конфигурацией, он выдает другое сообщение об ошибке.

Ответ №1:

Они используют разные движки Javascript. Сообщения об ошибках будут отличаться от движка к движку.

https://en.wikipedia.org/wiki/List_of_ECMAScript_engines

1. Я предполагаю, что это возможно, но я вижу, что способ наложения ошибок также отличается на моем локальном компьютере и в песочнице. Я могу понять, что сообщения об ошибках различаются на разных движках, но почему оверлеи выглядят по-разному?

2. Это может быть либо функция движка, либо codesandbox может иметь некоторые пользовательские стили CSS, которые применяются к экрану вывода ошибок.

Ответ №2:

это работает с моей стороны

 import React from "react";

export default class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    };
  }

  handleIncrementClick() {
    this.setState(({ counter }) => ({
      counter: counter   1
    }));
  }

  render() {
    const { counter } = this.state;

    return (
      <div>
        <p>Counter value is: {counter}</p>
        <p>
          <button onClick={() => this.handleIncrementClick(this)}>Increment Counter</button>
        </p>
      </div>
    );
  }
}

1. Спасибо, @Fehmy, но я не пытаюсь решить проблему. Я создал эту изолированную среду, чтобы специально продемонстрировать проблему. Я пытаюсь понять, почему сообщение об ошибке отличается между моим локальным компьютером и CodeSandbox.