我摔倒了，对于我当前的文件来说，这是一个非常具体的错误，因为控制台中的错误对我来说是希腊语......
我的母语不是英语。我正在尝试将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();
}
}
您使用的是 React 和 ReactDOM 的缩小版本，它们仅在您将应用程序部署到野外时使用。它们更小，更快，但这是以剥离许多不错的开发功能为代价的。这包括所有错误消息，这就是为什么它们对您来说如此令人困惑的原因！
要解决此问题，您应该确保使用的是 React 和 ReactDOM 的未压缩开发版本。虽然通常您应该使用 NPM 和像 Webpack 这样的模块捆绑器将它们安装到您的项目中（或像 create-react-app 这样的脚手架工具），但如果您只想下载文件，您可以在此处执行此操作：
- https://unpkg.com/react/dist/react.js
- https://unpkg.com/react-dom/dist/react-dom.js
替换脚本后，您将能够看到实际的错误消息是什么。
实际上，您的错误告诉您使用非缩小文件进行开发，以便看到真正的错误。
所以只需替换你的脚本注入（react.min.js=> react.js，等等......
您必须
将NODE_ENV设置为开发才能解决问题。
set NODE_ENV=development
更方便地相应地配置package.json："scripts": { "start": "set NODE_ENV=production && node app" }
这是针对Windows的。