終極版形式6.0.0接入域組件之外錯誤

在終極版形式V5我能夠從任何地方訪問到「內聯」的錯誤（異步驗證）在裝飾形式，就像這樣：終極版形式6.0.0接入域組件之外錯誤

const fields = [ 
    'email' 
] 

// inside the decorated form 
const { email } = this.props.fields 

console.log(email.error) // 'the validation error of the 'email' field

如何使用Redux-form 6.0.0+實現相同的功能？

來源

2016-08-19 Grsmto

如果您要在輸入旁邊顯示錯誤，那麼應該在您傳遞給Field的component中處理它。如果你想在表單被提交按鈕的底部顯示的所有錯誤一起一樣，你可以使用新的Fields component像這樣：

const fieldNames = [ 
    'email', 
    'password' 
] 

const renderAllErrors = fields => (
    <ul> 
    {Object.keys(fields).map(key => { 
     const { meta: { touched, error } } = fields[ key ] 
     return touched && error ? <li key={key}>{key}: {error}</li> : undefined 
    })} 
    </ul> 
) 

... 

<Fields names={fieldNames} component={renderAllErrors}/>

來源

2016-08-22 09:19:26

當我遍歷字段時，其中一個道具是名稱數組。從閱讀文檔（http://redux-form.com/6.0.2/docs/api/Fields.md/#props）我認爲它不會被添加爲道具。當我運行上面的代碼時，我得到 - 未捕獲（承諾）TypeError：無法讀取未觸發的屬性undefined（...） –

僅供參考，僅供參考。如果你想有條件地顯示錯誤列表，記得在你的'renderAllErrors'方法中進行檢查。將自定義組件中的'Fields'包裝起來並在那裏進行檢查可能會導致'Fields'組件卸載並取消註冊所有'fieldNames'。 – atomman

我找到的解決方案是使用error支柱（http://redux-form.com/6.0.0-rc.4/docs/api/Props.md/#-error-any-）。從我asyncValidate函數我填寫返回的error._error對象與我的字段錯誤。然後，我可以使用 const { error } = this.props從裝飾表格訪問它。

如果有人有更好的解決方案...

編輯：不要這樣做。使用有效答案（Fields組件）。

來源

2016-08-19 10:08:57 Grsmto

這是正確的。 –

嗨，Erik，其實我對這個解決方案並不滿意，因爲我不知道表單字段是否被「接觸」。所以它顯示每個領域的每一個錯誤。仍在尋找適當的方式來複制v5的行爲。（感謝您在這個項目上的驚人工作）。 – Grsmto

如何訪問syncErrors對象？ –

終極版形式6.0.0接入域組件之外錯誤

回答

相關問題