Invariant Violation: Elementtyp ist ungültig: erwartet eine Zeichenfolge oder eine Klasse/Funktion, aber habe: undefined

Question

Ich versuche, reine Funktion für mein Login-Formular zu implementieren, und ich verwende Redux-Form.

Und ich habe diesen Fehler in meinem Unit-Test:

Invariant Violation: Element type is invalid: expected a string or a class/function but got: undefined. 

Hier ist meine Komponente, die ich testen will:

import { Username } from './presentation/LoginPage.js'; 
export class LoginPage extends React.Component { 
    render() { 
    const { error, handleSubmit, pristine, reset, submitting } = this.props; 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <label>Username</label> 
      <Field 
      name="username" 
      component={username => 
       <Username username /> 
      } /> 
     </div> 
     </form> 
    ); 
    } 
} 

LoginPage.propTypes = { 
}; 

export default reduxForm({ 
    form: 'login', // a unique identifier for this form 
})(LoginPage); 

Und hier ist meine reine Komponente:

export const Username = (props) => { 
    const { username } = props; 
    return (
    <div> 
     <input type="text" {...username} placeholder="Username" /> 
     {username.touched && username.error && <span>{username.error}</span>} 
    </div>); 
}; 

Wenn ich es im Browser spiele, habe ich reduce is not defined. Es funktioniert gut, wenn ich die <Field />

entfernen Gibt es etwas Offensichtliches habe ich vermisst?

Answer 1

ah Ich glaube, ich mische die Syntax für Field zwischen v6 und 5. Feld ist für Redux-Form v6 verfügbar.

Answer 2

Sie seltsam haben machen mit Username Komponente

<Username username /> 

Es kurze Syntax für die folgenden

<Username username={true} /> 

Nach Rest des Codes ist, sollte hier

sein

<Username username={username} />