Question

我正在使用redux，redux形式并做出反应。我填写表单字段，提交，然后在“结果”组件中显示输入的值。

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;

我console.log道具检查其价值。它被发射了两次。道具第一次包含我希望在props.formData.main.values下使用的形式值。因此，我认为mapStateToProps工作正常。但是随后console.log被第二次解雇，props.formData是一个空对象。我还使用Redux chrome扩展程序，可以清楚地看到在表单提交后，存储中的数据被清除了。

谁能向我解释这种行为，我该如何解决？谢谢。

Answer 1

您不会在处理程序中“使用”提交的数据（将数据保存到redux存储中的调度动作？）。

由于某些原因，重定向后可能会清除表单数据，例如重置状态，不保存旧数据以用于下一页/网址等的新表单。

Answer 2

我把它修好了。 Redux-form的默认行为是在卸载表单后丢弃该表单数据。为了防止这种默认行为，您必须像这样将destroyOnUnmount设置为false：

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

我希望这可以帮助遇到相同问题的人。

将redux状态映射到props-状态消失了吗？

2 个答案: