不变违规：元素类型无效：应为字符串或 class/function 但得到：未定义

Question

我正在尝试为我的登录表单实现纯函数，我正在使用 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 />

时它工作正常

有什么明显的我错过了吗？

Answer 1

啊我想我在 v6 和 5 之间混合了 Field 的语法。字段可用于 redux-form v6。

Answer 2

您使用 Username 组件进行了奇怪的渲染

<Username username />

以下是短语法

<Username username={true} />

根据其余代码，这里应该是

<Username username={username} />

不变违规：元素类型无效：应为字符串或 class/function 但得到：未定义

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

reactjs

redux

redux-form