Question

我正在尝试预填充个人信息，但是我遇到了一个异步问题。任何帮助将不胜感激。

看着：https://medium.com/@1sherlynn/react-redux-form-two-ways-to-add-initial-values-ab48daa0a32e和https://redux-form.com/6.0.0-alpha.4/examples/initializefromstate/

class AccountOverview extends Component {

  constructor() {
    super();
    this.state = { data: [] };
  }

  async componentDidMount() {
    const data = { fullname: "fullname", username: "username" }

    this.setState({ data })

  }

  render() {
     console.log(this.state.data)

     <PersonalInfo
     initialValues={this.state.data} />

     ....

我希望表单由数据状态填充。我向他记录了以下结果

[]
{ fullname: "fullname", username: "username" }

我认为异步调用完成后，组件不会重新加载。

PersonalInfo.js：

const PersonalInfo = props => {

const { username, fullname, handleOnChange, validationErrors } = props;

return (
    <div>
    <h1> Personal Information</h1>
    <br />
    <Field
        type="text"
        name="fullname"
        icon=""
        label="Fullname"
        value={fullname}
        component={FormField}
        onChange={handleOnChange}
    />
    <Field
        type="text"
        name="username"
        icon=""
        label="Username"
        value={username}
        component={FormField}
        onChange={handleOnChange}
    />
    </div>
)

}

function mapStateToProps(state) {

return {
    state
   };

}

export default reduxForm({form: "AccountOverview"})(connect(mapStateToProps)(PersonalInfo))

Answer 1

在docs中，您错过了重要的步骤。

在initialValuesprop中添加mapStateToProps，您可以从redux存储中检索initialValues

所以您的mapStateToProps应该是

const mapStateToProps = (state, props) => ({
  initialValues: state, // retrieve data from redux store 
})

要将initialValues道具传递到redux形式，我们使用connect函数

添加enableReinitialize : true设置为true时，initialValues道具每次更改时，表单都会重新初始化

这个

export default reduxForm({form: "AccountOverview"})(connect(mapStateToProps)(PersonalInfo))

应该是

export default connect(
  mapStateToProps
)(reduxForm({
   form: 'AccountOverview', // a unique identifier for this form
  enableReinitialize: true
})(PersonalInfo))

在利用异步数据填充的组件上使用initialValues

1 个答案: