Reactjs 将React类更改为函数时出现问题

我听说在React中几乎不再使用类，因为函数工作得很好。所以，我在别处复制了

react-datepicker

类，现在我正试图将其更改为函数

它不太正确，不管我选择什么，它都会给我今天的日期。日历选择我想要的日期，但它会将今天的日期传递给我

类别：

class CalendarClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  handleChange = date => {
    this.setState({
      date: date
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.date}
          onChange={this.handleChange}
          minDate={new Date()}
          dropdownMode="select"
        />
        <AddMassageDate date={this.state.date} dateData={this.props.dateData} />
      </div>
    );
  }
}

类CalendarClass扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 日期：新日期（） }; } handleChange=日期=>{ 这是我的国家({ 日期：日期 }); } render（）{ 返回( ); } } 功能：

function CalendarClass ({ date, dateData }) {

  let [day, setDay] = useState(new Date());

  let handleChange = day => {
    setDay(day);
    date = day;
  };

  return (
    <>
      <DatePicker
        selected={day}
        onChange={handleChange}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={date} dateData={dateData} />
    </>
  );
}

函数CalendarClass（{date，dateData}）{
让[day，setDay]=useState（新日期（））；
让handleChange=天=>{
设定日(天);；
日期=天；
};
返回(
);
}

问题在于，您的

日期

道具已更改，但此更改不会在组件的渲染之间持久化。我建议删除

日期

属性，只使用

日期

状态挂钩

函数CalendarClass（{dateData}）{
让[day，setDay]=useState（新日期（））；
返回(
设定日（d）}
minDate={new Date（）}
dropdownMode=“选择”
/>
);
}

让我们像这样重构您的组件

const CalendarClass = props => {
const [day, setDay] = useState(new Date());
const { date, dateData } = props;

  const handleChange = day => {
    setDay(day);
    date = day;
  };


    return (
       <>
      <DatePicker
        selected={day}
        onChange={handleChange}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={date} dateData={dateData} />
    </>
    );
}

const CalendarClass=props=>{
const[day，setDay]=useState（新日期（））；
const{date，dateData}=props；
const handleChange=day=>{
设定日(天);；
日期=天；
};
返回(
);
}

类没有从react中删除，仍然非常可行。重写整个应用程序可能不是您想要做的事情。只是一个旁注：我将

date

更改为

day

，因为

date

已经定义好了。我想知道，这是否会导致失败？你的函数期望从道具中得到一个日期，你会发送它吗？@MohammedShammout是的，它与类一起工作。类/函数之外的内容不会更改。说得好！不幸的是，这不起作用，可能是因为正如另一个答案中所解释的，

day

在这里也应该被称为

date

。是否有理由将

let

更改为

const

？这两者之间有区别吗？

const

是常量，如果您不想在代码中更改它，最好使用

const

而不是

let

let

是可更改的。我只是将您的类组件重构为函数组件。我对道具一无所知。这由您决定。