Redux-Form v6跟蹤髒字段

我有一個名爲'collapseList'的組件，它使用ArrayField呈現對象數組。數據是這樣的：Redux-Form v6跟蹤髒字段

[ 
    { item-name: 'shirt', item-Id: 332 ...}, 
    { item-name: 'shoes', item-Id: 320 ...} 
]

問題是如何跟蹤我的數組中的每個項目是否髒或不？例如，在我的數據中，我想知道鞋子對象的輸入字段是否很髒。當字段發生變化時，我會更新髒，並且我可以更改對象的索引和鍵，但是我在哪裏存儲？我試圖在組件中創建一個對象來跟蹤它，但是當我在setState裏面說renderField時，我收到錯誤，說我不能這麼做。我該怎麼辦？

這是代碼的簡化版本，如果任何人有興趣，可以幫助我。

collapseList.js

class collapseList extends Component { 

    handleSubmitter(values) { 
    event.preventDefault(); 
    // handle submission 
    } 

    renderField({input, label, index, className, disabled, type, meta: {touched, error, dirty, warning}}) { 
    return(
     <div> 
     <label>{label}</label> 
     <div className="form-group row"> 
      <div className={className}> 
      <input className="form-control" {...input} placeholder={label} type={type} disabled={disabled}/> 
      {touched && 
       ((error && <span>{error}</span>) || 
       (warning && <span>{warning}</span>))} 
      </div> 
     </div> 
     </div> 
    ) 
    } 

    renderList({ fields, meta: { dirty } }){ 
    return(
     <div> 
     {fields.map((item, index, field) => { 
      return (
      <div> 
       <Field 
       name={`${item}['item-name']`} 
       component={this.renderField} 
       label="Item-Name" 
       /> 
       <Field 
       name={`${item}['item-Id']`} 
       component={this.renderField} 
       label="Item-Id" 
      /> 
      </div> 
     )} 
     )} 
     </div> 
    ) 
    } 

    render(){ 
    return(
     <div> 
     <form onSubmit={handleSubmit(this.handleSubmitter)}> 
      <FieldArray name="items" component={this.renderList} /> 
     </form> 
     </div> 
    ) 
    } 

} 

function mapStateToProps(state) { 
    return { 
    initialValues: { 
     items: state.listings.list 
    } 
    } 
} 

export default connect(mapStateToProps, null)(reduxForm({ 
    form: 'collapseList', 
    enableReinitialize: true, 
    validate 
}, mapStateToProps)(collapseList));

來源

2017-05-22 gangmember

它可以用減速機跟蹤格式轉換和保存更改的領域。代碼片段如下所示：

export const collapseList = (state = { 
     collapseTemp: null 
    }, action) => { 
     switch (action.type) { 
     case '@@redux-form/CHANGE': 
      collapseTemp = {} 
      collapseTemp[action.meta.field] = action.payload 
      return { 
      ...state, 
      collapseTemp 
      } 
     } 
    }

來源

2017-05-24 02:47:25 Jin

謝謝您的回覆！我做了你所提到的，並做出了所有更改值的狀態列表。然後在componentWillReceiveProps的組件中，我分散了來自initialValues的值，然後將其添加到髒字段列表中。這是一個奇怪的方式，但它的工作原理。希望我能找到更好的方法。 – gangmember

Redux-Form v6跟蹤髒字段

回答

相關問題