Question

我认为这是我当前文件的一个非常具体的错误，因为控制台中的错误对我来说是希腊语...

我不是英语母语人士。我想把React和HTML放在一起。我在我的HTML文件中有一个使用React呈现的搜索表单。我需要输入元素中的用户输入发送到我的javascript文件中的函数search（）。我以前有过这方面的帮助，并且工作了一段时间。

在我的JS文件中，我有搜索功能。现在，结果呈现在那里。我不指望它能起作用！

我的问题是我得到的错误。它在按下搜索按钮时发生。这是什么意思？我无法理解它，因此我无法弄清楚我做错了什么。错误在哪里？

我使用下载的库，我在Atom中编码并使用Chrome控制台。

以下是代码+错误。

> Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at r (react.min.js:16)
    at c._renderValidatedComponent (react.min.js:13)
    at c._updateRenderedComponent (react.min.js:13)
    at c._performComponentUpdate (react.min.js:13)
    at c.updateComponent (react.min.js:13)
    at c.performUpdateIfNecessary (react.min.js:13)
    at Object.performUpdateIfNecessary (react.min.js:15)
    at u (react.min.js:15)
    at r.perform (react.min.js:16)
    at o.perform (react.min.js:16)

    <html>
    <head>
        <meta charset="utf-8">
        <title>Inlämningsuppgift 6</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>

      <div id="form_container"></div>
      <div id="movies_list"></div>
      <div id="gifs_list"></div>

      <script type="text/babel">

      "use sctrict";

      var Form = React.createClass({
        search: search, //The search function from js-file attached globaly.

        renderForm: function() {
          return (
            <div className="form_div">
              Movie: <input type="text" className="query"></input>
              //Button calls search function in js-file.
              <button onClick={this.search} className="submit">Search</button>
            </div>
          );
        },

        render: function() {
          return this.renderForm();
        }
      });
      // End of class Form

    ReactDOM.render(<Form />, document.getElementById('form_container'));

    </script>
    <script src="inl6.js"></script>
  </body>

</html>

    function search(event) {
  event.preventDefault();
  //Variables
  var movies_list = document.getElementById('movies_list');
  var gifs_list = document.getElementById('gifs_list');

  //Input validation and handling
  if(this.elements.query.value === '') {
    alert("Ange ett sökord!");
  } else {
    var rawInputData = this.elements.query.value;
    var fixedInputData = rawInputData.split(" ");
    var inputData = encodeQueryData(fixedInputData);
    var inputDatagif = encodeQueryDatagif(fixedInputData);

    //URL encoding functions
    function encodeQueryData(data) {
       let ret = [];
       for (let d in data)
         ret.push(encodeURIComponent(data[d]));
       return ret.join('%20');
    }

    function encodeQueryDatagif(data) {
       let ret = [];
       for (let d in data)
         ret.push(encodeURIComponent(data[d]));
       return ret.join('+');
    }

    // Objekt to handle AJAX
    var omdbAPI = new XMLHttpRequest();
    var gifAPI = new XMLHttpRequest();
    //Set URLs
    var omdbURL = "http://www.omdbapi.com/?s=" + inputData + "&type=movie";
    var gifURL = "http://api.giphy.com/v1/gifs/search?q=" + inputDatagif + "&limit=1&api_key=dc6zaTOxFJmzC";

    //Handle search response, validate and act
    omdbAPI.addEventListener("load", function() {
      if (this.responseText === '{"Response":"False","Error":"Movie not found!"}')
      {
        alert("Sökningen gav inget resultat.");
      } else {
        //Convert from JSON
        var result = JSON.parse(this.responseText);
        var entries = result.Search;

        //Loop through recieved object and display result.
        for(var entry_key in entries) {
          //control that property is own by the object (not prototype)
          if(entries.hasOwnProperty(entry_key)) {
              //Access the entry
              var entry = entries[entry_key];
              //Display result
            var movie_line = "<p><strong>Title:</strong> " + entry.Title + " (year: " + entry.Year + ")</p>";
            console.log(movie_line);
            movies_list.innerHTML += movie_line;
          }
        }
      }
    });

    //Rinse and repeat above for gifs and Giphy API
    gifAPI.addEventListener("load", function() {
      if (this.responseText === '{"Response":"False","Error":"Movie not found!"}')
      {
        alert("Sökningen gav inget resultat.");
      } else {
        var result = JSON.parse(this.responseText);
        var gifs = result.data;

        for(var entry_key in gifs) {
          if (gifs.hasOwnProperty(entry_key)) {
            var gif = gifs[entry_key];
            var gif_line = "<img src='" + gif.url + "'></img>";
            gifs_list.innerHTML += gif_line;
          }
        }
      }
    });

    //Send
    omdbAPI.open("get", omdbURL, true);
    omdbAPI.send();
    gifAPI.open("get", gifURL, true);
    gifAPI.send();
  }
}

Answer 1

您正在使用React和ReactDOM的缩小版本，这些版本仅在您将应用程序部署到野外时使用。它们的体积更小，速度更快，但这是以许多漂亮的开发功能被剥离为代价的。这包括所有错误信息，这就是为什么它们让你感到困惑的原因！

要解决此问题，您应确保使用React和ReactDOM的未压缩开发版本。虽然通常你应该使用NPM和像Webpack这样的模块捆绑器将它们安装到你的项目中（或像create-react-app这样的脚手架工具），如果你只想下载文件，你可以在这里这样做：

一旦您更换了脚本，您就可以看到实际的错误消息了。

Answer 2

实际上，您的错误会告诉您使用非缩小文件进行开发，以便查看真正的错误。

所以只需替换你的脚本注入（react.min.js =＆gt; react.js等等）

Answer 3

您必须将NODE_ENV设置为开发才能解决问题。

set NODE_ENV=development

更方便地相应地配置package.json："scripts": { "start": "set NODE_ENV=production && node app" }

这适用于Windows。

React + JS文件，Uncaught Error：Minified exception，使用Atom + Chrome控制台

3 个答案: