如何在使用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调度动作后更新字段值

回答

相关问题