Redux Form не может редактировать профиль пользователя - PullRequest
Новая
       2

Redux Form не может редактировать профиль пользователя

0 голосов
/ 16 января 2020

Я пытаюсь создать форму для редактирования профиля пользователя в React + Redux Form + Firebase, моя проблема в том, что Я не могу ввести любой текст в сгенерированную форму в Redux Form . Я пытаюсь ввести текст в это, но он отключен ...

На самом деле, изначально я получаю данные профиля пользователя (и это работает). Затем я пытаюсь создать форму для редактирования профиля. 

class Settings extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.fetchProfile();
  }

  renderField = field => {
    const {
      input,
      label,
      type,
      meta: { touched, error }
    } = field;
    return (
      <div className="formItem">
        <p>{label}</p>
        <input {...input} type={type} placeholder={label} />
        {touched && error && <span>{error}</span>}
      </div>
    );
  };

  onSubmit = values => {
    const { uid } = this.props.room;
    this.props.updateProfile(uid, values);
  };

  render() {
    const { handleSubmit, pristine, submitting, invalid, room } = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            label="Your name"
            name="name"
            type="text"
            value={user.name}
            component={this.renderField}
          />
          <div className="formBtn">
            <input
              type="submit"
              className="btn btnPrimary"
              value="Save Changes"
              disabled={pristine || submitting || invalid}
            />
          </div>
        </form>
      </div>
    );
  }
}

const validate = values => {
  const errors = {};
  console.log(values);
  if (!values.name) errors.name = "Enter your name";
  return errors;
};

const mapDispatchToProps = { fetchProfile, updateProfile };

function mapStateToProps({ users }) {
  return { user: users };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({ validate, form: "profileForm", enableReinitialize: true })(
    Settings
  )
);

Ответы [ 2 ]

1 голос
/ 16 января 2020

Вам не нужно указывать значение для компонента Field, вместо этого вам нужно передать значения как initialValues in mapStateToProps: 

function mapStateToProps({ users }) {
  return {
    user: users,
    initialValues: {
      name: users.name,
    },
  };
}
0 голосов
/ 16 января 2020 
import { createStore, applyMiddleware, combineReducers } from "redux";
import reduxThunk from "redux-thunk";
import { reducer as formReducer } from "redux-form";

const rootReducer = combineReducers({
  form: formReducer
});

const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

Я добавил formReducer, все работает.

...