0

ログインフォームに純粋な機能を実装しようとしていますが、redux-form を使用しています。

そして、単体テストで次のエラーが発生しました。

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

テストしたいコンポーネントは次のとおりです。

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);

そして、ここに私の純粋なコンポーネントがあります:

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

ブラウザで再生すると、reduce is not defined. 削除すると正常に動作します<Field />

私が見逃した明らかなものはありますか？

4

2 に答える 2

1

ああ、v6 と 5 の間で構文を混合していると思いますField。フィールドは redux-form v6 で使用できます。

于 2016-06-23T03:21:48.403 に答える