Объединить InitialValues ​​+ FormValues ​​Redux Form - PullRequest
Новая
       5

Объединить InitialValues ​​+ FormValues ​​Redux Form

0 голосов
/ 01 марта 2020

Отредактировано, чтобы быть более точным c

Здравствуйте,

Во-первых, у меня есть объект с именем service, который принадлежит массиву и выглядит так: 

{
    description:'lorem ipsum',
    category:'leisure',
    duration:'60',
    hasVariants:true,
    uid:'HDICB9892',
    variants:[
        {
            price:58,
            seats:1,
            title:'title1'
        },
        {
            price:92,
            seats:1,
            title:'title2'
        }
    ]
}

Затем у меня есть форма Redux, которая возвращает еще один объект с именем Item после отправки. Этот объект выглядит следующим образом: 

{
    uidService:'HDICB9892',
    stock:4,
    variants:[
        {
            endPrice:30
        },
        {
            endPrice:60
        }
    ]
}

Моя цель, somwhow, состоит в возможности объединения обоих объектов после отправки формы. Цель состоит в том, чтобы при создании объекта имелся объект item, содержащий скриншот службы . 

{
    description:'lorem ipsum',
    category:'leisure',
    duration:'60',
    hasVariants:true,
    uid:'HDICB9892',
    uidService:'HDICB9892', <---------From Item
    stock:4, <---------From Item
    variants:[
        {
            price:58,
            seats:1,
            title:'title1',
            endPrice:30 <---------From Item
        },
        {
            price:92,
            seats:1,
            title:'title2',
            endPrice:60 <---------From Item
        }
    ]
}

Для этого я подумал об инициализации избыточной формы значениями службы, но проблема в том, что я не знаю, что это за услуга, прежде чем позвонить в форму. Существует набор сервисов, и выбранный сервис выбирается с помощью Select Input внутри формы Redux.

Затем я попытался выполнить props.initialize, передавая выбранные значения сервиса, но не содержащий formValues это не относится к сервисному объекту, например, к стоимости акций.

Вот мой текущий код: 

import _ from 'lodash';
import React, {useState} from 'react';
import {reduxForm, Field, FieldArray} from 'redux-form';

import { 
    Button,
    Grid,
}from '@material-ui/core';

import {GroupGrid, TextInput, ServicesInput} from './FormFields';


const formName = 'ProviderItemForm';


const renderVariantsArr = ({ fields, meta: { error, submitFailed } }) =>{
    return (
        <div>
            {fields.map((variant,index)=>(
                <GroupGrid key={index}>
                    <Field name={`${variant}.price`} component={TextInput} disabled label="Price" adornement="€"/>
                    <Field name={`${variant}.endPrice`} component={TextInput} label="End Price" adornement="€"/>
                </GroupGrid>
            ))}
        </div>
    )}

const ProviderItemForm = (props) =>{
    const {handleSubmit, onFormSubmit, services} = props;
    const [activeItem, setActiveItem] = useState(null);



    const onChangeService = (event) =>{
        setActiveItem(services[event.target.value])
        props.initialize({...initialValues,...services[event.target.value]});
    }



    const renderVariants = () =>{
        if(activeItem){
            return(
                <div>
                    <FieldArray name="variants" variants={activeItem.variants} component={renderVariantsArr}/>
                </div>

            );
        }else{
            return null;
        }
    }

    return(
        <div>
            <form onSubmit={handleSubmit(onFormSubmit)}>
                <input type="hidden" value="something"/>
                <Field name="uidService" label="Título del servicio" component={ServicesInput} onChange={onChangeService} services={services} autoComplete="off"/>
                <Field name="stock" type="number" label="Stock" component={TextInput}/>
                {renderVariants()}
                <Grid container justify="flex-end">
                    <Button autoFocus type="submit" variant="contained" color="primary">Save</Button>
                </Grid>
            </form>
        </div>
    )
}

const initialValues = {
    dateStart:new Date().toISOString().slice(0,16),
}

export default reduxForm({
    form:formName,
    initialValues,
    enableReinitialize: true,
    keepDirtyOnReinitialize:true
})(ProviderItemForm);

Возможно, есть способ достичь того, что я ищу но я не могу найти его в документации Redux Form и искать в inte rnet.

Я очень ценю любую помощь по этому вопросу:)

...