如何在使用redux調度動作後更新字段值

我想在使用redux調用ajax之後填充表單。如何在使用redux調度動作後更新字段值

我的情況很簡單：

我有一個簡單的用戶形式（只有一個文本字段現在），這是必然的狀態connect()一個反應視圖。
我調用一個rest API來獲取用戶。
完成api調用後，會向用戶發送操作。
減速器用用戶更新商店狀態。
我想用檢索的值填充/更新表單。

解決方案1：

如果我設置的道具一樣，值：

const Field = ({ field, onFieldChange, value }) => (
    <input 
    value={value} 
    onChange={(event) => { onFieldChange(field, event.target.value) }} 
    type="text" 
    /> 
)

它的工作原理，但我得到這樣的警告：

Field is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).

我明白爲什麼我得到這個錯誤，因爲我不應該使用組件來顯示一些東西，也能夠更新它。

我也嘗試使用defaultValue道具，但這隻用於組件創建（並且我們還沒有用戶）。在ajax調用返回後，defaultValue不能被調用。

解決方案2：

使用Redux的形式與自定義插件每個國家獲得更新時間更新表單模型。我不覺得這個解決方案真的很乾淨，但也許我錯了。

我真的很瘦，我走錯了方向，它應該存在一個更好的方法。

有人已經遇到過這種問題嗎？

來源

2016-09-20 Julien Sanchez

當我試圖將undefined作爲輸入值時，我遇到了同樣的問題。

爲了解決這個問題，確保你至少使空字符串輸入，而不是不確定的

const Field = ({ field, onFieldChange, value }) => (
    <input 
    value={value || ''} // <- add fallback value here 
    onChange={(event) => { onFieldChange(field, event.target.value) }} 
    type="text" 
    /> 
)

來源

2016-09-20 20:37:28

太棒了，它修復了它。我非常絕望，非常感謝！ –

其實你可以嘗試讓你的組件有狀態 - 存儲和管理的內部輸入的值它（they say it's ok）。
或者如果你確實需要在商店中使用這個值，使用redux-form，我真的很好用它的經驗（你將不得不編寫更少的樣板代碼）。順便說一句，你就不必使用任何自定義插件，您可以使用initialValues，看到更多的here

上述解決方案將是肯定的工作，但它似乎不是很好。

來源

2016-09-20 21:22:05 kitos

initialValues在redux-form上不起作用，因爲當我初始化表單時，用戶還沒有被讀取。所以表單被初始化爲空，我不能在之後更新它。 –

@JulienSanchez，如果你看看我給你展示的例子，你會發現那裏的表單也是異步初始化的（點擊按鈕）。此外，表格可以根據需要進行多次初始化，通過使用「自己初始化動作（使用由redux-form提供的動作創建器）」 – kitos

是的，但是通過表單中的按鈕看到了。您可以從表單內部派發這樣簡單的內容。另外，我不覺得它真的很乾淨，不得不從表單外部派發一個內部事件：/ –

如何在使用redux調度動作後更新字段值

回答

相關問題