时间戳

首页 > 解决方案 > 为什么我会收到此错误：尝试导入错误：DatePickerField 未从 /..whatever 导出

reactjs - 为什么我会收到此错误：尝试导入错误：DatePickerField 未从 /..whatever 导出

问题描述

我正在尝试在我的 material-ui 表单中实现 Formik 字段。除了日期之外，我一切正常。什么样的恶梦。我有很多问题，但目前的问题是 React 告诉我：

尝试导入错误：DatePickerField 未从“../formfields”导出

这是完整的 DatePickerField.jsx 文件：

import React, { useState, useEffect } from 'react';
import { useField } from 'formik';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from '@material-ui/pickers';

const DatePickerField = props => {
  const [field, meta, helper] = useField(props);
  const { touched, error } = meta;
  const { setValue } = helper;
  const isError = touched && error && true;
  const { value } = field;
  const [selectedDate, setSelectedDate] = useState(null);

  useEffect(() => {
    if (value) {
      const date = new Date(value);
      setSelectedDate(date);
    }
  }, [value]);

  function _onChange(date) {
    if (date) {
      setSelectedDate(date);
      try {
        const ISODateString = date.toISOString();
        setValue(ISODateString);
      } catch (error) {
        setValue(date);
      }
    } else {
      setValue(date);
    }
  }

  return (
    <Grid container>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          {...field}
          {...props}
          variant="inline"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={_onChange}
          error={isError}
          invalidDateMessage={isError && error}
          helperText={isError && error}
          disableToolbar
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </MuiPickersUtilsProvider>
    </Grid>
  );
}

export default DatePickerField;

如您所见，我很好地导出了它。但是当我尝试将它导入到我的表单中时，我得到了上述错误。我都试过了：

import { DatePickerField } from '../../forms/formfields';

和：

import DatePickerField from '../../forms/formfields';

但无论哪种方式，我都会得到错误。我究竟做错了什么？非常感谢任何帮助！

标签： reactjsrxjsmaterial-uijsxformik

解决方案

您没有导入文件。您放置了路径，但没有从 formsfields 文件夹中添加您想要的文件。所以将 /DatePickerField 附加到导入路径

推荐阅读