Question

我有一个redux表单，在发出ajax请求后会在其中加载大量动态字段，以便使用动作创建器。

当我对任何单个字段进行任何更改时，即使我没有触摸或更改它们，所有其他字段也会重新呈现。

这是渲染方法

public render(): JSX.Element {
    const props = this.props;
    const { handleSubmit } = props;
    let form: any = null, fields = null;
    fields = props.fields.map(field => {
        switch (field.fieldTypeID) {
            case "1": {
                return <Field 
                key={field.fieldId} 
                id={`f${field.fieldId}`} 
                name={`f${field.fieldId}`} 
                component={RenderField} 
                type="int" 
                validate={field.custom.fieldValidations} 
                >
                {[{ field: field }]}
                </Field>;
            }
            case "2": {
                return <Field 
                key={field.fieldId} 
                id={`f${field.fieldId}`} 
                name={`f${field.fieldId}`} 
                component={RenderField} 
                type="text" 
                validate={field.custom.fieldValidations} 
                >
                {[{ field: field }]}
                </Field>;
            }
            case "3": {
                return <Field 
                key={field.fieldId} 
                id={`f${field.fieldId}`} 
                name={`f${field.fieldId}`} 
                component={RenderField} 
                type="textArea" 
                validate={field.custom.fieldValidations}
                >{[{ field: field }]}
                </Field>;
            }
            default:
                return <div/>;
        }
    });
    form = <form name="frm" onSubmit={handleSubmit(this.submit.bind(this))}>
        {fields}
        <RaisedButton type="submit" primary={true} label="Submit"/>
    </form>;
    return form;

}

Answer 1

事实证明，所有字段的重新呈现都是在我删除此子元素并将额外的道具添加到Field之后将{[{ field: field }]}内的自定义额外道具作为子元素props嵌入的比如<Field props={...customProps}。它没有重新渲染所有其他领域。

单个字段更改后，所有redux-form字段都会重新呈现

1 个答案: