Redux-Form，如何将formValueSelector与动态字段名称一起使用?

Question

我正在使用 redux 表单并尝试创建一个字段组件，如下所示：

<Rating
stop={10}
initialRate={selector(this.props.state, 'age')}
onRate={(rate) => this.onRateChange(rate)}
onChange={(value) => { this.changeRate("name", value) } }
/>
<span className="label label-default" id="label-onrate">{this.state.label}</span>
<Field
name="age"
type="number"
component={renderField2}
/>
RateForm = reduxForm({
form: 'rateForm'
})(RateForm);
const selector = formValueSelector('rateForm');
const mapStateToProps = state => {
return {
};
};
export default connect(mapStateToProps)(RateForm);

我遇到的问题是initialRate不起作用...以下内容不返回值：

selector(this.props.state, 'age')

由于字段名称将是动态的，因此我需要避免：

在mapStateToProps中定义特定的字段名称。

我用redux-form formValueSelector做错了什么，没有为initialRate提供值？

Answer 1

你可以做这样的事情：

import { getFormValues } from 'redux-form/immutable'

getFormValues将返回与提供的form name对应的保存值。

const mapStateToProps = state => {
const formState = getFormValues('rateForm')(state)
console.log('formState...', formState)
return formState 
}

这对我来说很好用。我正在获得特定于此形式的所有Field组件的值，即在您的情况下rateForm。 有关更多详细信息，您可以转到此处。

Answer 2

从文档中：

从formValueSelector()返回的函数具有以下内容 结构：

选择器(状态：对象， ...字段：字符串(

state : Object [required]

赋予mapStateToProps的全局 Redux 状态。

...field : String [required]

要选择的一个或多个字段。如果您只提供一个 字段名称，函数将返回该字段的值。如果你 提供多个字段名称，它将返回一个对象映射 字段到值。如果您的字段是"深"的(即有一个或多个 . 名字(，你得到的结构也会很深。例如，如果您的 字段'a.b'和'a.c'，得到的结构将被{ a: { b:'bValue', c: 'cValue' } }.

在您的情况下，您不会从mapStateToProps返回任何内容，

您可以不要在评级组件中使用选择器，而是将其放在mapStateToProps中并像使用它一样

<Rating
stop={10}
initialRate={selector(this.props.state, 'age')}
onRate={(rate) => this.onRateChange(rate)}
onChange={(value) => { this.changeRate("name", value) } }
/>

const selector = formValueSelector('rateForm');
const mapStateToProps = state => {
return {
state
};
};

上面的示例假设props可用于Rating组件。

Answer 3

@Ritesh指出了我的解决方案：

const formName = "form";
const form = reduxForm<MyFormFields, MyFormProps>({form: formName});    
function MyForm() {
return (
<div>
Here your form
</div
);
}
const mapStateToProps = (state: any) => ({
initialValues: {
},
getFormFieldValue: (field: string) => {
const selector = formValueSelector(formName);
return selector(state, field);
}
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
changeField: (field: string, value: any) => dispatch(change(formName, field, value)),
resetForm: () => dispatch(reset(formName)),
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(form(MyForm)));

希望这对某人有所帮助！