为什么 React 找不到这个文件?
Why can't React find this file?
React 找不到我正在尝试导入的文件。
我尝试了所有不同版本的更改导入文件路径的方法,added/removed .js
从所有尝试中,三重检查没有拼写 errors/capitalization 问题,并做了 npm update
只是为了尝试不同的东西。我在这里碰壁了。
我得到的主要错误是:
[Error: ENOENT: no such file or directory, stat '/initrd.img'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/initrd.img'
}
./src/App.js
Module not found: You attempted to import /components/number.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
我想这可能是我尝试 import/export 事情的方式有问题?以下是我用来整理到目前为止所拥有的资源的资源:
App.js
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Numbers from './components/number.js';
class App extends Component {
constructor(props) {
super(props)
this.state = {
buttonText: "button1"
}
this.changeWord = this.changeWord.bind(this);
}
changeWord() {
if (this.state.buttonText === "button2") {
this.setState({
buttonText: "button1"
})
}
else {
this.setState({
buttonText: "button2"
})
}
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<Numbers />
<button className="test-button" onClick={this.changeWord}>{this.state.buttonText}</button>
</header>
</div>
);
}
}
export default App;
number.js
import React, { Component } from "react";
import axios from "axios";
import { response } from "express";
export default class Numbers extends Component {
constructor(props) {
super(props);
this.state = {
numbers: []
};
}
componentDidMount() {
axios
.get("http://localhost:3000/record/")
.then((response) => {
this.setState({
numbers: response.data
});
console.log(this.state.numbers);
})
.catch(function(err) {
console.log(err);
});
}
render() {
return (
<div>
<h3>Numbers</h3>
<table>
<thead>
<tr>
<th>Number</th>
</tr>
</thead>
<tbody>{this.numbers()}</tbody>
</table>
</div>
);
}
}
我想通了。
我最近使用 sudo apt-get update && sudo apt-get upgrade
更新了我的机器,由于某种原因,它似乎破坏了根文件路径中 /initrd.img
和 /initrd.img.old
的链接(/
).
I 运行 sudo update-grub
,解决了这个问题。之后,我注意到在它(仍然)找不到 /initrd.img
之前,它会闪现一个错误,说它找不到 axios。
我运行npm install axios
.
现在一切正常。不确定是哪一个修复了它,但希望这可以让其他人免去 2 天的头痛!
React 找不到我正在尝试导入的文件。
我尝试了所有不同版本的更改导入文件路径的方法,added/removed .js
从所有尝试中,三重检查没有拼写 errors/capitalization 问题,并做了 npm update
只是为了尝试不同的东西。我在这里碰壁了。
我得到的主要错误是:
[Error: ENOENT: no such file or directory, stat '/initrd.img'] { errno: -2, code: 'ENOENT', syscall: 'stat', path: '/initrd.img' }
./src/App.js Module not found: You attempted to import /components/number.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
我想这可能是我尝试 import/export 事情的方式有问题?以下是我用来整理到目前为止所拥有的资源的资源:
App.js
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Numbers from './components/number.js';
class App extends Component {
constructor(props) {
super(props)
this.state = {
buttonText: "button1"
}
this.changeWord = this.changeWord.bind(this);
}
changeWord() {
if (this.state.buttonText === "button2") {
this.setState({
buttonText: "button1"
})
}
else {
this.setState({
buttonText: "button2"
})
}
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<Numbers />
<button className="test-button" onClick={this.changeWord}>{this.state.buttonText}</button>
</header>
</div>
);
}
}
export default App;
number.js
import React, { Component } from "react";
import axios from "axios";
import { response } from "express";
export default class Numbers extends Component {
constructor(props) {
super(props);
this.state = {
numbers: []
};
}
componentDidMount() {
axios
.get("http://localhost:3000/record/")
.then((response) => {
this.setState({
numbers: response.data
});
console.log(this.state.numbers);
})
.catch(function(err) {
console.log(err);
});
}
render() {
return (
<div>
<h3>Numbers</h3>
<table>
<thead>
<tr>
<th>Number</th>
</tr>
</thead>
<tbody>{this.numbers()}</tbody>
</table>
</div>
);
}
}
我想通了。
我最近使用 sudo apt-get update && sudo apt-get upgrade
更新了我的机器,由于某种原因,它似乎破坏了根文件路径中 /initrd.img
和 /initrd.img.old
的链接(/
).
I 运行 sudo update-grub
,解决了这个问题。之后,我注意到在它(仍然)找不到 /initrd.img
之前,它会闪现一个错误,说它找不到 axios。
我运行npm install axios
.
现在一切正常。不确定是哪一个修复了它,但希望这可以让其他人免去 2 天的头痛!