将 initialValue 作为 prop 传递给 redux-form 字段

Question

有很多关于 redux-form 的文档，但 none 到目前为止对我的特定设置有所帮助。

最终目标故事

我想预先填写个人资料表格，最终允许更改数据并通过 API 发回。

目前进度...

我可以在 form.js 文件中使用静态值预填充表单。下一步是用为该配置文件获取的数据替换这些静态值。我已准备好数据并可用于索引上的配置文件，我现在需要将其传递给 form.js 并替换静态 initialValues。然而，form.js 文件的结构方式对我来说并不那么明显，如何将这个 "prop" 传递到 initialValues 标签。

INDEX.JS

import React, { Component } from 'react';
import { Provider } from "react-redux";
import store from "./store";
import MyForm from "./form";
import { connect } from 'react-redux';
import { whenGapiReady } from 'util/gapiHelper';
import PropTypes from 'prop-types';
import { fetchProfile } from 'actions/PlayerProfile';

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

    static propTypes = {
        playerId: PropTypes.string
    }

    componentDidMount() {
        this.handleInitialize();
    }

    componentDidMount() {
        whenGapiReady(() => {
            const { fetchProfile } = this.props;
            const { playerId } = this.props.match.params;
            fetchProfile(playerId);
        });
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.hasOwnProperty('profile')) {
            if (this.props.profile.playerId !== prevProps.profile.playerId) {
                // We only really need to reload the player if the playerId has changed
            }
        }
    }

    render() {

        const { playerId } = this.props.match.params;
        const { profile } = this.props;

        if (!playerId) {
            return null;
        }

        return (

            <Provider store={store}>                           
                <MyForm fullName={profile.fullName} />
            </Provider>

        );
    }
}

const mapStateToProps = ({ playerProfile, settings }) => {
    const { loader, profile, profileError } = playerProfile;
    const { darkTheme } = settings;
    return { loader, profile, profileError, darkTheme };
};

export default connect(mapStateToProps, { fetchProfile })(UserProfilePage);

正如您从上面看到的，我正在尝试在此处传递个人资料名称：

<MyForm fullName={profile.fullName} />

FORM.JS

import React, { Component } from 'react';
import { reduxForm, Field, FieldArray } from "redux-form";

const renderfirstName = ({ fields }) => (
  <div>
    <h3>Player Profile:</h3>
    {fields.map((playerProfile, index) => (
      <div>
        <Field name={playerProfile} key={index} component="input" />
      </div>
    ))}
    <button type="button" onClick={() => fields.push()}>Add more</button>
  </div>
);
const MyForm = ({ handleSubmit, fullName }) => (
  <form onSubmit={ handleSubmit } initialValues={{fullName: fullName}}>
    <FieldArray name="fullName" component={renderfirstName} />
    <button type="submit">Submit</button>
  </form>
);
export default reduxForm({

  form: "foo",
  enableReinitialize: true,
  onSubmit: values => {
    window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
  }
})( MyForm );

我尝试将 initialValues 标签直接添加到 <form> 标签上：

<form onSubmit={ handleSubmit } initialValues={{fullName: fullName}}>

但最初我在导出中有这样的 initialValues：

export default reduxForm({
  form: "foo",
  initialValues: {
    playerProfiles: ['Tom Rudge']
  },
  onSubmit: values => {
    window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
  }
})( MyForm );

在 form.js 导出中设置了 initialValues 后，表单会预先填充静态值，它只是将获取的值从其父索引中获取到表单中，这似乎是问题所在。任何帮助表示赞赏。

Answer 1

好的，所以设法解决了，希望这会对其他人有所帮助 - 这样我可以在需要时参考

INDEX.JS

<Provider store={store}>                           
     <MyForm initialValues={{fullName:[profile.fullName]}} />
</Provider>

在组件级别传递 InitialValue。

FORM.JS

  <form onSubmit={ handleSubmit }>
    <FieldArray name="fullName" component={renderfirstName} />
    <button type="submit">Submit</button>
  </form>

删除表单级别的任何其他 initialValues

Answer 2

对于那些正在寻找包含 react-redux 的解决方案的人，您可以通过以下方式从道具中提取。

使用 mapStateToProps，确保将 ownProps 作为第二个参数传递。然后你可以 return 一个 initialValues 对象将你的道具链接到你的表单名称，就像这样

function mapStateToProps(state, ownProps) {
  return {
    initialValues: { formName: ownProps.propsValue }
  };
}

将 initialValue 作为 prop 传递给 redux-form 字段

Pass initialValue as prop to redux-form field

javascript

reactjs

redux-form

react-redux