Question

我在Redux表单中有一个FieldArray，我在这个数组中推送对象，之后我有一个回调来触发一个函数来发出一个POST请求。

当我提交表单时，我得到旧值，因为Redux表单的push（）方法是来自redux的异步调度。

// Parent component
<FieldArray
     name="myObjects"
     component={ChildComponent}
     onSubmitObjects={this.onSubmit} />

// Function
onSubmit = async () => {
    const { getFormValues } = this.props;

    const data = {
        myObjects: getFormValues.myObjects
    }

    try {
        // const contact = await Service.updateUser(data);

    } catch (e) {
        console.log(e)
    }
}

我需要在推送方法之后立即提交在数组中添加新值的表单。

// Function inside ChildComponent
addNewObject = () => {
        const { fields, onSubmitObjects} = this.props;

        fields.push({
            number: 1,
            name: 'Foo',
        });

        if (onSubmitObjects) {
            onSubmitObjects(); // cb() to trigger a function in the parent component
        }
    }

有没有办法在push方法之后立即使用新值调用回调？

Answer 1

您应该使用带有redux-form form的{{1}}来包裹handleSubmit。您可以选择将自定义提交功能（以进行API请求，提交验证等）传递给FieldArray，使其看起来像handleSubmit ...

请参阅redux-form official docs中的此示例：

<强> FieldArraysForm.js

<form onSubmit={handleSubmit(this.onSubmit)}>

React Redux Form：表单提交旧值

1 个答案: