將 initialValue 作為 prop 傳遞給 redux-form 字段

Question

redux-form 有很多文檔，但到目前為止都沒有對我的特定設置有所幫助。

最終目標故事

我想預先填寫一份個人資料表格，最終允許更改數據並通過 API 發回。

目前進展...

我可以在 form.js 文件中使用靜態值預填充表單。 下一步是用為該配置文件獲取的數據替換這些靜態值。 我已准備好數據並可用於索引上的配置文件，我現在需要將其傳遞給 form.js 並替換靜態initialValues 。 但是，form.js 文件的結構方式對我來說如何將這個“prop”傳遞到initialValues標記上並不那么明顯。

索引文件

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} />

表單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

好的，所以設法解決了，希望這會對其他人有所幫助 - 所以如果我需要，我可以參考

索引文件

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

在組件級別傳遞 InitialValue。

表單JS

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

在表單級別刪除任何其他initialValues值

Answer 2

對於那些正在尋找包含 react-redux 的解決方案的人，您可以通過以下方式從 props 中提取。

使用mapStateToProps ，確保將 ownProps 作為第二個參數傳遞。 然后你可以返回一個 initialValues 對象，將你的道具鏈接到你的表單名稱，就像這樣

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