React-native使用Redux表单返回未定义的组件

时间:2017-01-19 00:13:15

标签: reactjs react-native redux immutable.js redux-form

我目前正在使用redux-form,immutablejs和react-native构建一个登录表单并收到此错误。不太清楚这笔交易是什么,任何提示/资源都值得赞赏!

connectedfielderror

LoginForm.js

import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import { Text, View, TouchableOpacity } from 'react-native';
import { EmailField, PasswordField } from './common';

const LoginForm = (props) => {
  const { handleSubmit } = props;
    return (
      <View style={styles.container}>

        <View>
          <Field name="email" component={EmailField} />
        </View>

        <View>
          <Field name="password" component={PasswordField} />
        </View>

        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={handleSubmit}>
            <Text style={styles.button}>
              Sign In
            </Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={handleSubmit}>
            <Text style={styles.button}>
              Sign Up
            </Text>
          </TouchableOpacity>
        </View>

      </View>
    );
};

//...

export default reduxForm({
  form: 'LoginForm'
})(LoginForm);

EmailField.js

import React from 'react';
import { TextInput } from 'react-native';

const EmailField = (props) => {
  const { input: { value, onChange }, ...otherProps } = props;
  return (
    <TextInput
      placeholder="email@gmail.com"
      keyboardType="email-address"
      onChange={value => onChange(value)}
      {...otherProps}
    />
  );
};

export { EmailField };

PasswordField.js

import React from 'react';
import { TextInput } from 'react-native';

const PasswordField = (props) => {
  const { input: { value, onChange }, ...otherProps } = props;
  return (
    <TextInput
      secureTextEntry
      placeholder="password"
      onChange={(value) => onChange(value)}
      value={value}
      {...otherProps}
    />
  );
};

export  { PasswordField }

的package.json

 "dependencies": {
        "immutable": "^3.8.1",
        "npm": "^4.1.1",
        "react": "^15.4.2",
        "react-native": "0.39.2",
        "react-redux": "^5.0.2",
        "redux": "^3.6.0",
        "redux-form": "^6.4.3",
        "redux-immutable": "^3.0.10",
      },

ConnectedField.js https://github.com/erikras/redux-form/blob/e6f7ee65853996c533d497354cf5aca596e3b304/src/ConnectedField.js

render() {
      const {
        component,
        withRef,
        name,
        // remove props that are part of redux internals:
        _reduxForm,  // eslint-disable-line no-unused-vars
        normalize,   // eslint-disable-line no-unused-vars
        onBlur,      // eslint-disable-line no-unused-vars
        onChange,    // eslint-disable-line no-unused-vars
        onFocus,     // eslint-disable-line no-unused-vars
        onDragStart, // eslint-disable-line no-unused-vars
        onDrop,      // eslint-disable-line no-unused-vars
        ...rest
      } = this.props
      const { custom, ...props } = createFieldProps({ getIn, toJS },
        name,
        {
          ...rest,
          form: _reduxForm.form,
          onBlur: this.handleBlur,
          onChange: this.handleChange,
          onDrop: this.handleDrop,
          onDragStart: this.handleDragStart,
          onFocus: this.handleFocus
        }
      )
      if (withRef) {
        custom.ref = 'renderedComponent'
      }
      if (typeof component === 'string') {
        const { input, meta } = props // eslint-disable-line no-unused-vars
        // flatten input into other props
        return createElement(component, { ...input, ...custom })
      } else {
        return createElement(component, { ...props, ...custom })
      }
    }
  }

  ConnectedField.propTypes = {
    component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]).isRequired,
    props: PropTypes.object
  }

0 个答案:

没有答案