新的在React JS有问题在我的新项目

Question

因为我是ReactJs的新手，不要面对它的错误，并在我试图在我的项目中制作图片查看器和日期选择器时陷入问题。请指引我…提前感谢

错误提示是:

编译失败。

。/src/App.jsSyntaxError: D:webappsrcApp.js:标识符'React'已被声明。(7)

1 | import React, { Component } from 'react';
2 | import React from 'react';
|        ^
3 | import './App.css';
4 | import 'date-fns';
5 | import Grid from '@material-ui/core/Grid';**



import React, { Component } from 'react';
import React from 'react';
import './App.css';
import 'date-fns';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
MuiPickerUtilsProvider,
KeyboardTimePicker,
KeyboarddatePicker} from '@material-ui/pickers';
const [selectedDate, setSelectDate] = React.useState(
new Date("2021-09-11 T 12:00:00")
)
const handleDateChange = (date) => {
setSelectedDate(date)
}
export class App extends Component{
state={
profileImg:'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png'
}
imageHandler = (e) => {
const reader = new FileReader();
reader.onload = () =>{
if(reader.readyState === 2){
this.setState({profileImg: reader.result})
}
}
reader.readAsDataURL(e.target.files[0])
};
render() {
const{profileImg} = this.state
return(
<div className="page">
<div className="container">
<h1 className="heading">Add your Image</h1>
<div className="img-holder">
<img src={profileImg} alt="" id="img" className="img" />
</div>
<input type="file" accept="image/*" name="image-upload" id="input" onChange={this.imageHandler} />
<div className="label">
<label className="image-upload" htmlFor="input">
<i className="material-icons">add_photo_alternate</i>
Choose  your Photo
</label>
</div>

<div className="App"> 
<MuiPickersUtilsProvider utils={DateFnsUtils}> 
<Grid container justify='space-around'>
<KeyboardDatePicker
disableToolbar
variant='inline'
format='MM/dd/yyy'
margin='normal'
id='date-picker'
label='Date Picker'
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{'aria-label': 'change date'}}
/>
</Grid> 
</MuiPickersUtilsProvider>
</div>
</div>
</div>
)
}
}
export default App; 

Answer 1

您正在重复导入React

删除代码的第二行:

import React, { Component } from 'react';
import React from 'react';  // <--- REMOVE THIS!

Answer 2

您已经导入了2次react。

删除第二行代码，这就足够了:

import React, { Component } from 'react';

关于:

./src/App.js模块未找到:无法解析'@date-io/date-fns'中的"D: webapp src">

是否安装了依赖项?如果不是npm install date-fns

Answer 3

基本上你在你的文件中导入了两次react库，这是产生错误的。试着从你的文件中删除react的第二行导入，看看是否能解决你的问题。