Javascript 如何从导入的功能组件访问钩子变量？

如何从导入的功能组件访问DateTimePicker的选定日期

下面是带有DateTimePicker的功能组件

import React, { useState } from "react";
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';

 export default function BasicDateTimePicker() {
     
    var date = new Date()
    const [selectedDate, handleDateChange] = useState(new Date(date.setMonth(date.getMonth() + 6)));

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DateTimePicker
                allowKeyboardControl
                ampm
                animateYearScrolling
                initialFocusedDate
                value={selectedDate}
                disablePast
                onChange={handleDateChange}
                format=" dd/MM/yyyy hh:mm:ss a "
                showTodayButton
            />
        </MuiPickersUtilsProvider>
    );
}

import React，{useState}来自“React”；
从“@material ui/pickers”导入{DateTimePicker，MuiPickersUtilsProvider}；
从“@date io/date fns”导入DateFnsUtils；
导出默认函数BasicDateTimePicker（）{
变量日期=新日期（）
const[selectedDate，handleDateChange]=useState（新日期（Date.setMonth（Date.getMonth（）+6））；
返回(
);
}

下面是我想使用selectedDate的一段代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import BasicDateTimePicker from './components/BasicDateTimePicker';

ReactDOM.render(
  <React.StrictMode>
    <BasicDateTimePicker />
    <h1>{selectedDate}</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“./components/BasicDateTimePicker”导入BasicDateTimePicker；
ReactDOM.render(
{selectedDate}
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

---

我读过关于道具的书，但这有助于在相反的方向上传递变量。React在单向流中工作。因此，您需要调用回调处理程序作为实现这一点的道具

您应该将代码稍微修改如下：

export default function BasicDateTimePicker({
  selectedDate,
  handleDateChange
}) {

  return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DateTimePicker
              allowKeyboardControl
              ampm
              animateYearScrolling
              initialFocusedDate
              value={selectedDate}
              disablePast
              onChange={handleDateChange}
              format=" dd/MM/yyyy hh:mm:ss a "
              showTodayButton
          />
      </MuiPickersUtilsProvider>
  );
}

导出默认函数BasicDateTimePicker({
选定日期，
手边的零钱
}) {
返回(
);
}

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“/components/BasicDateTimePicker”导入BasicDateTimePicker；
常量日期时间=（）=>{
变量日期=新日期（）；
常量[selectedDate，handleDateChange]=useState(
新日期（Date.setMonth（Date.getMonth（）+6））
);
返回(
{selectedDate}
);
};
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

React在单向流中工作。因此，您需要调用回调处理程序作为实现这一点的道具

您应该将代码稍微修改如下：

export default function BasicDateTimePicker({
  selectedDate,
  handleDateChange
}) {

  return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DateTimePicker
              allowKeyboardControl
              ampm
              animateYearScrolling
              initialFocusedDate
              value={selectedDate}
              disablePast
              onChange={handleDateChange}
              format=" dd/MM/yyyy hh:mm:ss a "
              showTodayButton
          />
      </MuiPickersUtilsProvider>
  );
}

导出默认函数BasicDateTimePicker({
选定日期，
手边的零钱
}) {
返回(
);
}

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“/components/BasicDateTimePicker”导入BasicDateTimePicker；
常量日期时间=（）=>{
变量日期=新日期（）；
常量[selectedDate，handleDateChange]=useState(
新日期（Date.setMonth（Date.getMonth（）+6））
);
返回(
{selectedDate}
);
};
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

它提出了以下问题

index.js:1437警告：根：错误边界应实现getDerivedStateFromError（）。在该方法中，返回状态更新以显示错误消息或回退UI。

。奇怪的是，在调试时，我可以在控制台和断点处看到具有正确值的{selectedDate}。当我恢复脚本执行时，它崩溃了。如果我删除

{selectedDate}

，或者将useState与字符串和布尔值一起使用，但不与此处的日期一起使用，它工作正常

selectedDate

是一个日期类型的对象，您需要将其转换为类似字符串的

selectedDate.toString（）

它提出了以下问题

index.js:1437警告：根：错误边界应实现getDerivedStateFromError（）。在该方法中，返回状态更新以显示错误消息或回退UI。

。奇怪的是，在调试时，我可以在控制台和断点处看到具有正确值的{selectedDate}。当我恢复脚本执行时，它崩溃了。如果我删除

{selectedDate}

，或者将useState与字符串和布尔值一起使用，但不与此处的日期一起使用，则它工作正常

selectedDate

是一个日期类型的对象，您需要将其转换为类似字符串的

selectedDate.toString（）