React: Uncaught ReferenceError: Autocomplete is not defined even though the js library is imported
React: Uncaught ReferenceError: Autocomplete is not defined even though the js library is imported
这些是我 HTML 页面中的导入:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react-autocomplete@1.8.1/dist/react-autocomplete.js"></script>
<script src="/SiteAssets/papaparse.min.js"></script>
这是我在同一 HTML 页面中导入的反应脚本:
<script type="text/babel" src="/SiteAssets/my_script.js"></script>
这是 my_script.js
:
const buttonRef = React.createRef()
const FileReaderElement = React.createElement;
class FileReader extends React.Component {
constructor() {
super();
this.state = {
csvfile_url: "http://" + window.location.hostname + "/SiteAssets/mychannel_index.csv"
};
this.updateData = this.updateData.bind(this);
this.mychannel_csv = this.importCSV();
}
handleChange = event => {
this.setState({
csvfile_url: event.target.files[0]
});
};
importCSV = () => {
const { csvfile_url } = this.state;
Papa.parse(csvfile_url, {
download: true,
complete: this.updateData,
header: true
});
};
updateData(result) {
var data = result.data;
console.log(data);
}
render() {
console.log(this.state.csvfile_url);
return (
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => value = e.target.value}
onSelect={(val) => value = val}
/>
);
}
}
const getSuggestions = value => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
return inputLength === 0 ? [] : languages.filter(lang =>
lang.name.toLowerCase().slice(0, inputLength) === inputValue
);
};
// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
<div>
{suggestion.name}
</div>
);
const domContainer = document.querySelector('#container');
ReactDOM.render(FileReaderElement(FileReader), domContainer);
但是,即使我导入了自动完成库,我在控制台中仍收到以下错误:
Uncaught ReferenceError: Autocomplete is not defined
at FileReader.render (<anonymous>:57:34)
at finishClassComponent (react-dom.development.js:17295)
at updateClassComponent (react-dom.development.js:17245)
at beginWork (react-dom.development.js:18755)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22292)
at workLoopSync (react-dom.development.js:22265)
为什么导入不起作用?
我打开 chrome 控制台并输入 window.Autocomplete,但没有这样的。但是 chrome console 提示确实有一个叫做 ReactAutocomplete 的函数。
所以,尝试使用 ReactAutocomplete 而不是 Autocomplete
这些是我 HTML 页面中的导入:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react-autocomplete@1.8.1/dist/react-autocomplete.js"></script>
<script src="/SiteAssets/papaparse.min.js"></script>
这是我在同一 HTML 页面中导入的反应脚本:
<script type="text/babel" src="/SiteAssets/my_script.js"></script>
这是 my_script.js
:
const buttonRef = React.createRef()
const FileReaderElement = React.createElement;
class FileReader extends React.Component {
constructor() {
super();
this.state = {
csvfile_url: "http://" + window.location.hostname + "/SiteAssets/mychannel_index.csv"
};
this.updateData = this.updateData.bind(this);
this.mychannel_csv = this.importCSV();
}
handleChange = event => {
this.setState({
csvfile_url: event.target.files[0]
});
};
importCSV = () => {
const { csvfile_url } = this.state;
Papa.parse(csvfile_url, {
download: true,
complete: this.updateData,
header: true
});
};
updateData(result) {
var data = result.data;
console.log(data);
}
render() {
console.log(this.state.csvfile_url);
return (
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => value = e.target.value}
onSelect={(val) => value = val}
/>
);
}
}
const getSuggestions = value => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
return inputLength === 0 ? [] : languages.filter(lang =>
lang.name.toLowerCase().slice(0, inputLength) === inputValue
);
};
// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
<div>
{suggestion.name}
</div>
);
const domContainer = document.querySelector('#container');
ReactDOM.render(FileReaderElement(FileReader), domContainer);
但是,即使我导入了自动完成库,我在控制台中仍收到以下错误:
Uncaught ReferenceError: Autocomplete is not defined
at FileReader.render (<anonymous>:57:34)
at finishClassComponent (react-dom.development.js:17295)
at updateClassComponent (react-dom.development.js:17245)
at beginWork (react-dom.development.js:18755)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22292)
at workLoopSync (react-dom.development.js:22265)
为什么导入不起作用?
我打开 chrome 控制台并输入 window.Autocomplete,但没有这样的。但是 chrome console 提示确实有一个叫做 ReactAutocomplete 的函数。 所以,尝试使用 ReactAutocomplete 而不是 Autocomplete