Отображение избыточного состояния в реквизит - состояние уничтожено? - PullRequest
Новая
       7

Отображение избыточного состояния в реквизит - состояние уничтожено?

0 голосов
/ 02 сентября 2018

Я использую редукс, редукс-форму и реагирую. Я заполняю поля формы, отправляю ее, а затем хочу отобразить введенные значения в компоненте Result.

Result.jsx 

import React from 'react';
import { connect } from 'react-redux';

const Result = props => {
  console.log(props);
  return (
    <div>
     test
    </div>
  );
};

const mapStateToProps = state => {
  return {
    formData: state.form
  };
}

export default connect(mapStateToProps)(Result);

РЕДАКТИРОВАТЬ: 

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './state/store';
import MainForm from './containers/MainForm';
import Result from './components/Result';

class App extends Component {

  render() {
    return (
      <Provider store={store}>
      <BrowserRouter>
        <div>
        <Route path="/" component={MainForm} exact />
        <Route path="/submitted" component={Result} />
        </div>
      </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

EDIT2: 

class MainForm extends Component {
  state = {
    submit: false
  };

  handleSubmit = data => {
    this.setState({ submit: true });
  };

  render() {
    const { handleSubmit, pristine, submitting, reset } = this.props;
    const { submit } = this.state;

    if (submit) {
      return <Redirect to="/submitted" />;
    }

    return (
      <Wrapper>
        <h2>Some header</h2>
        <FormWrapper onSubmit={handleSubmit(this.handleSubmit)}>
         // FORM FIELDS..
          <Button variant="contained" color="primary" type="submit" disabled={submitting}>
            Submit
          </Button>
          <Button variant="contained" disabled={pristine || submitting} onClick={reset}>
            Clear Values
          </Button>
        </FormWrapper>
      </Wrapper>
    );
  }
}

MainForm = reduxForm({
  form: 'main'
})(MainForm);

export default MainForm;

I console.log реквизит, чтобы проверить его значение. Это уволено дважды. Первый раз, когда реквизит содержит значения формы, на которые я надеялся в props.formData.main.values. Поэтому я предполагаю, что mapStateToProps работал нормально. Но затем console.log срабатывает во второй раз, а props.formData - пустой объект. Я также использую расширение Redux Chrome и ясно вижу, что после отправки формы данные в хранилище стираются.

Может ли кто-нибудь объяснить мне это поведение и как я могу это исправить? Спасибо.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Я исправил это. Поведение Redux-формы по умолчанию - отбрасывать данные формы после размонтирования формы. Чтобы предотвратить это поведение по умолчанию, вы должны установить destroyOnUnmount в false следующим образом:

MainForm = reduxForm({ form: 'main', destroyOnUnmount: false // default is true })(MainForm);

Надеюсь, это поможет кому-то с такой же проблемой.

0 голосов
/ 02 сентября 2018

Вы не «потребляете» отправленные данные (действие отправки, чтобы сохранить данные в хранилище избыточных данных?) В обработчике.

Вероятно, данные формы очищаются после переадресации по некоторым причинам, например состояние сброса, без сохранения старых данных для новой формы на следующей странице / URL и т. д.

...