React新手开发图片查看器与日期选择器时遇React重复声明编译报错求助

你遇到的编译报错是基础的重复声明问题，除此之外代码还有多处语法、规则错误，按以下步骤逐一修复即可：

1. 修复重复导入React报错 #

你在第1行已经完整导入了React和Component，第2行重复导入React导致标识符冲突，直接删除第2行的import React from 'react';即可解决当前的编译失败问题。

2. 修复其他代码错误 #

删除重复导入后还存在多处不符合React规则和组件调用错误的问题，需要同步修改：

• 组件名拼写错误：
  • 导入的MuiPickerUtilsProvider拼写错误，实际Material UI提供的组件名为MuiPickersUtilsProvider，需要修改导入语句的组件名
  • 导入的KeyboarddatePicker首字母未大写，正确为KeyboardDatePicker
• React Hook使用规则错误：
  React.useState是函数组件专属的Hook，不能在类组件外部、类组件内部非顶层作用域使用。你当前用的是Class类组件，建议把日期相关状态放到类组件的state中，不要用Hook。
• 变量名不匹配错误：
  之前声明state更新函数时命名为setSelectDate，调用时写为setSelectedDate，二者不一致会触发未定义报错。
• 日期初始化及格式错误：
  日期字符串"2021-09-11 T 12:00:00"中间多余空格会导致日期解析异常，需删除空格；原日期格式化参数yyy少了一位，需改为yyyy。

3. 修改后完整可运行代码 #

import React, { Component } from 'react';
import './App.css';
import 'date-fns';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from '@material-ui/pickers';

export class App extends Component{
  state={
    profileImg:'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png',
    selectedDate: new Date("2021-09-11T12:00:00")
  }
  imageHandler = (e) => {
    const reader = new FileReader();
    reader.onload = () =>{
      if(reader.readyState === 2){
        this.setState({profileImg: reader.result})
      }
    }
    reader.readAsDataURL(e.target.files[0])
  };

  handleDateChange = (date) => {
    this.setState({selectedDate: date})
  }

  render() {
    const{profileImg, selectedDate} = this.state
    return(
      <div className="page">
        <div className="container">
          <h1 className="heading">添加你的图片</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>
              选择你的照片
            </label>
          </div>
          
          <div className="App"> 
            <MuiPickersUtilsProvider utils={DateFnsUtils}> 
              <Grid container justify='space-around'>
                <KeyboardDatePicker
                  disableToolbar
                  variant='inline'
                  format='MM/dd/yyyy'
                  margin='normal'
                  id='date-picker'
                  label='日期选择器'
                  value={selectedDate}
                  onChange={this.handleDateChange}
                  KeyboardButtonProps={{'aria-label': '修改日期'}}
                />
              </Grid> 
            </MuiPickersUtilsProvider>
          </div>
        </div>
      </div>
    )
  }
}

export default App;

内容的提问来源于stack exchange，提问作者anjum