locked
TypeError: Cannot read property 'yyy' of undefined RRS feed

  • Question

  • User-1790681572 posted

    Summary of the problem I am having:

    I am new with typescript.  Can anyone help why I am having the error TypeError: Cannot read property 'yyy' of undefined.

    Error I am receiving:

    TypeError: Cannot read property 'Email' of undefined
      13 | const { signup } = state || initialState;
    14 | const signupSection: ICreateAccountIndexProps = {
    15 | Email: {
    > 16 | ErrorMessage: signup.Email.ErrorMessage || '',
    17 | Label: 'Email' + "*",
    18 | Name: 'EMAIL',
    19 | Text: signup.Email.Text || ''

    Uncaught TypeError: Cannot read property 'Email' of undefined
    at Function.mapStateToProps [as mapToProps] (container.tsx:16)
    at mapToPropsProxy (wrapMapToProps.js:43)
    at Function.detectFactoryAndVerify (wrapMapToProps.js:52)
    at mapToPropsProxy (wrapMapToProps.js:43)
    at handleFirstCall (selectorFactory.js:26)
    at pureFinalPropsSelector (selectorFactory.js:74)
    at Object.runComponentSelector [as run] (connectAdvanced.js:26)
    at Connect.initSelector (connectAdvanced.js:178)
    at new Connect (connectAdvanced.js:119)
    at constructClassInstance (react-dom.development.js:11448)
    at updateClassComponent (react-dom.development.js:13145)
    at beginWork (react-dom.development.js:13825)
    at performUnitOfWork (react-dom.development.js:15864)
    at workLoop (react-dom.development.js:15903)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15311)
    at renderRoot (react-dom.development.js:15963)
    at performWorkOnRoot (react-dom.development.js:16561)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at requestWork (react-dom.development.js:16355)
    at scheduleWork$1 (react-dom.development.js:16219)
    at scheduleRootUpdate (react-dom.development.js:16786)
    at updateContainerAtExpirationTime (react-dom.development.js:16813)
    at updateContainer (react-dom.development.js:16840)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)
    at react-dom.development.js:17263
    at unbatchedUpdates (react-dom.development.js:16680)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)
    at Object.render (react-dom.development.js:17318)
    at Object../src/index.tsx (index.tsx:11)
    at __webpack_require__ (bootstrap 69d19e108a4621d41386:678)
    at fn (bootstrap 69d19e108a4621d41386:88)
    at Object.0 (store.ts:30)
    at __webpack_require__ (bootstrap 69d19e108a4621d41386:678)
    at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 69d19e108a4621d41386:724)
    at bootstrap 69d19e108a4621d41386:724</div> </div> </div>

    My code:

    Container.tsx

      const mapStateToProps = (state: IRegistrationPageStore) => {    
          const { signup } = state || initialState;
          const signupSection: ICreateAccountIndexProps = {
            Email: {
              ErrorMessage: signup.Email.ErrorMessage || '',
              Label: 'Email' + "*",
              Name: 'EMAIL',
              Text: signup.Email.Text || ''
          },
          Fetching: signup.Fetching,
            FirstName: {
              ErrorMessage: signup.FirstName.ErrorMessage || '',
              Label: 'FIRSTNAME' + "*",
              Name: 'FIRSTNAME',
              Text: signup.FirstName.Text || '',
          },
          LastName: {
            ErrorMessage: signup.LastName.ErrorMessage || '',
            Label: 'LASTNAME' + "*",
            Name: 'LASTNAME',
            Text: signup.LastName.Text || '',
        },
        Message: signup.Message    
      }
          return { createAccount: signupSection};
      }
    

    Interfaces in store.ts

    export interface IField {
        Label?: string,
        Name?: string,
        ErrorMessage?: string,
        Text?: string
    }
    
    export interface IRegistrationPageStore {
        signup: {
            FirstName: IField,
            LastName: IField,       
            Email: IField,      
            Valid: boolean,       
            Message: string,
            Fetching:boolean
        }
    }
    
    export interface ICreateAccountIndexProps {
        FirstName: IField,
        LastName: IField,  
        Email: IField, 
        Fetching: boolean,
        Message?: string
    }
    
    export const initialState: IRegistrationPageStore = {  
        signup: {       
            Email: {},
            Fetching: false,
            FirstName: {},
            LastName: {},
            Message: "",       
            Valid: false,
        }
    }
    

    Tuesday, September 18, 2018 8:58 AM

All replies

  • User283571144 posted

    Hi JupiterSailorMoon,

    I am new with typescript.  Can anyone help why I am having the error TypeError: Cannot read property 'yyy' of undefined.

    Error I am receiving:

    TypeError: Cannot read property 'Email' of undefined

    According to your description, I guess you may not import the interface from the stone.ts, so you will face this error.

    I suggest you could try below codes, then it will work well.

    tsx:

    import { IRegistrationPageStore, initialState, ICreateAccountIndexProps } from "./file1";
    
    const mapStateToProps = (state: IRegistrationPageStore) => {
    	const { signup } = state || initialState;
    	const signupSection: ICreateAccountIndexProps = {
    		Email: {
    			ErrorMessage: signup.Email.ErrorMessage || '',
    			Label: 'Email' + "*",
    			Name: 'EMAIL',
    			Text: signup.Email.Text || ''
    		},
    		Fetching: signup.Fetching,
    		FirstName: {
    			ErrorMessage: signup.FirstName.ErrorMessage || '',
    			Label: 'FIRSTNAME' + "*",
    			Name: 'FIRSTNAME',
    			Text: signup.FirstName.Text || '',
    		},
    		LastName: {
    			ErrorMessage: signup.LastName.ErrorMessage || '',
    			Label: 'LASTNAME' + "*",
    			Name: 'LASTNAME',
    			Text: signup.LastName.Text || '',
    		},
    		Message: signup.Message
    	}
    	return { createAccount: signupSection };
    }

    ts:

    export interface IField {
    	Label?: string,
    	Name?: string,
    	ErrorMessage?: string,
    	Text?: string
    }
    
    export interface IRegistrationPageStore {
    	signup: {
    		FirstName: IField,
    		LastName: IField,
    		Email: IField,
    		Valid: boolean,
    		Message: string,
    		Fetching: boolean
    	}
    }
    
    export interface ICreateAccountIndexProps {
    	FirstName: IField,
    	LastName: IField,
    	Email: IField,
    	Fetching: boolean,
    	Message?: string
    }
    
    export const initialState: IRegistrationPageStore = {
    	signup: {
    		Email: {},
    		Fetching: false,
    		FirstName: {},
    		LastName: {},
    		Message: "",
    		Valid: false,
    	}
    }

    Result:

    Best Regards,

    Brando

    Wednesday, September 19, 2018 7:53 AM
  • User-474980206 posted

    the error message means

       state.signup.Email is undefined.

    most likely you are not initializing state correctly. state has a signup object, but signup does not have an Email object.

    Wednesday, September 19, 2018 2:55 PM
  • User-1790681572 posted
    export interface IRegistrationPageStore {
    	signup: {
    		FirstName: IField,
    		LastName: IField,
    		Email: IField,
    		Valid: boolean,
    		Message: string,
    		Fetching: boolean
    	}
    }

    Thursday, September 20, 2018 10:28 AM
  • User-474980206 posted
    That’s just the interface. How do you initial the store state?
    Thursday, September 20, 2018 2:19 PM