当用户离开时 Redux 表单状态丢失

Question

我有一个简单的 React 应用程序，我在其中显示了一个 redux 表单下拉列表。用户从此下拉列表中选择一个选项，此选项显示在页眉组件中。

由于 redux-form，此选项存储在 redux 存储中，并通过 formValueSelector 函数（同样来自 redux-form lib）访问。

但是，当用户定向到应用程序中的新页面时，此用户选择的选项会在 redux 商店中丢失。我该如何解决这个问题？

我试过用 withRouter 包装我的 Header 组件，但这似乎没有解决问题..

这是我的 redux 形式的主页组件：

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Link } from 'react-router-dom'

const centres = ['Ponders End', 'North Finchley', 'Hendon', 'Walthamstow']

const renderCentreDropdown = ({ input, label }) => {
  console.log({ input })
  return (
    <div className="inline field">
      <label>{label}</label>
      <select {...input} >
        <option value="">Select a centre...</option>
        {centres.map(centre => (
          <option value={centre} key={centre}>
            {centre}
          </option>
        ))}
      </select>
    </div>
  )
}

let HomePage = () => {
  return (
    <div className="ui middle aligned center aligned grid">
      <div className="column">
        <form className="ui large form">
          <div className="ui segment">
            <Field name="centreSelect" label="Select a centre: " component={renderCentreDropdown} />
            <div className="field">
              <div className="ui left icon input">
                <i className="user icon" />
                <input type="text" name="email" placeholder="E-mail address" />
              </div>
            </div>
            <div className="field">
              <div className="ui left icon input">
                <i className="lock icon" />
                <input type="password" name="password" placeholder="Password" />
              </div>
            </div>
          </div>
          <Link to="/todaysclass" className="ui fluid large pink submit button">Login</Link>
        </form>
      </div>
    </div>
  )
}

HomePage = reduxForm({
  form: 'centreSelectForm'
})(HomePage)

export default HomePage

这是我的页眉组件：

import React from 'react'
import { connect } from 'react-redux'
import moment from 'moment'
import { formValueSelector } from 'redux-form'

class Header extends React.Component {

  render() {
    console.log(this.props)
    return (
      <div className="ui secondary menu" >
        <h2 className="ui dividing header">Axis Tuition Centre{(this.props.centreName) ? ` - ${this.props.centreName}` : ''} </h2>
        <div className="right menu" >
          {moment().format('Do MMMM YYYY')}
        </div>
      </div>
    )
  }
}


const selector = formValueSelector('centreSelectForm')

export default connect(state => {
  const centreName = selector(state, 'centreSelect')
  return {
    centreName
  }
})(Header)

Answer 1

默认情况下，redux-form会在存在表单的组件卸载时销毁表单状态，因此要保留表单状态并在其他组件或路由后访问它，请设置destroyOnUnmount: false 在 reduxForm 在 HomePage.

这对你有用：

HomePage = reduxForm({
  form: 'centreSelectForm',
  destroyOnUnmount: false
})(HomePage)

当用户离开时 Redux 表单状态丢失

Redux form state is lost when user navigates away

reactjs

redux

react-router

redux-form