Javascript 声明后未读取导入值

我正在尝试从名为

profileData.js

的文件导入我的类。 在该文件中，保存react代码以将输入字段呈现给页面。非常简单的东西

一旦我这样做了，从我的

userProfileContent.js

页面，我只需像这样导入页面和类：

import CancelButton from '../Stripepayment/cancel'
import profileDataForm from '../components/profileData'
//this profileDataForm is greyed out, claims its not being called, when a few lines below it is actually being called!!!

const UserProfileContent = () =>
  <AuthUserContext.Consumer>
    {authUser =>
      <ColumnWithHeaderFooterAndScrollableContent
        header={<TitleWithActions title={authUser.email} />}
      >
        <Centered className="userProfileContent">
          <h2>Password Reset</h2>
          <PasswordChangeForm />
          <hr/>
          <profileDataForm />
          <ProfilePage/>
          <CancelButton/>
          <h2>Sign Out</h2>
          <SignOutButton />
        </Centered>
      </ColumnWithHeaderFooterAndScrollableContent>
    }
  </AuthUserContext.Consumer>

export default UserProfileContent;

---

不确定为什么这不起作用，它声称

值已声明但从未读取
，并且它不会在屏幕上显示
profileDataForm
，我从
profileData.js
调用它，以便在DOM中添加必须呈现的元素。因此，您必须添加一个
render
语句，并
return
这些组件，就像您在
userProfileContent.js
中所做的那样。
    import React, { Component } from 'react'
import { AuthorizationHome } from '../models'
import { Button, Input, Alert } from 'antd'


class profileDataForm extends Component {
//   constructor(props) {
//     super(props);
//   }


  render() {
    const {
      FirstName,
      LastName,
    } = this.state;

    return ( 
        <div>
      <form id='ProfileDetails'>
        <Input
          id="FirstName"
          type="text"
          placeholder="hello"
        />
        <Input
          id="LastName"
          type="text"
          placeholder="Confirm New Password"
        />
      </form>
      </div>


    );
  }
}
//

export default profileDataForm;