Redux Form v6 - 使用唯一鍵生成動態表單失去對輸入值的關注

Question

希望有人知道這個問題。 我有這樣一個數組：

let fields = [ 
    { name: 'email', type: 'email', placeholder: 'Email', component: FeedbackInput }, 
    { name: 'password', type: 'password', placeholder: 'Passwort', component: FeedbackInput } 
]; 

，我想通過我的終極版形式中，以使其：

<form onSubmit={ handleSubmit(this.props.startAnimation.bind(this, 'animatedBtnConfig')) }> 
<fieldset> 
    { fields.map(field => <Field key={_.uniqueId('field_')} { ...field } component={ FeedbackInput } />) } 
</fieldset> 
<fieldset className="center"> 
    <AnimatedButtonRedux /> 
</fieldset> 
</form> 

所以問題是，形式是初始有效的，我可以只輸入1個字符。然後它從輸入字段丟失焦點並且必須再次點擊它。

同樣的問題，當我嘗試將其與 「FieldArray」：

<FieldArray name="authData" component={ DynamicFields } fields={ fields } /> 

動態字段組成：

export default props => { 
    console.log("Dynamic Fields: ", props); 
    return (
    <div> 
     { props.fields.map(field => <Field key={_.uniqueId('field_')} { ...field } />) } 
    </div> 
); 
}; 

相反，當我試圖這樣說：

<Field { ...fields[0] } /> 
<Field { ...fields[1] } /> 
<Field { ...fields[2] } /> 

它效果很好。

當我看DOM時，我看不到devtool的任何區別。 爲什麼redux形式的行爲是這樣的？我無法弄清楚。我真的很感激它，當有人可以給我關鍵的時間來解決這個問題！

Answer 1

這是因爲您提供的key像key={_.uniqueId('field_')}

會發生什麼時，只要您的組件被重新描繪的Field組件unique id的，反應會檢查key呈現DOM，現在因爲你key每次組件渲染和map函數運行時，您的Field組件都會每次更換一個新組件，因此您會看到此問題。

儘管您需要設置密鑰，並且它應該在文檔中是唯一的，但它應該在每個渲染中保持不變。

因此改變關鍵

<fieldset> 
    { fields.map((field, index) => <Field key={index} { ...field } component={ FeedbackInput } />) } 
</fieldset>