Question

我想在使用redux进行ajax调用后填充表单。

我的情况非常简单：

我有一个简单的用户表单（目前只有一个文本字段），它是一个与connect()绑定到状态的反应视图。
我调用rest API来获取用户。
当api调用完成后，将向用户发送操作。
reducer会更新用户的商店状态。
我想用检索到的值填充/更新表单。

解决方案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-form更新表单模型。我觉得这个解决方案真的很干净，但也许我错了。

我真的很瘦，我走向错误的方向，它应该存在更好的方式。

有人已经遇到过这种问题吗？

Answer 1

当我尝试将undefined作为输入值时，我遇到了同样的问题。

要解决此问题，请确保至少将空字符串传递给输入，而不是未定义

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

Answer 2

实际上，您可能会尝试让您的组件成为状态 - 存储和管理其中的输入值（they say it's ok）。
或者如果你真的需要在商店中使用redux-form这个值，我有很好的使用它的经验（你必须编写更少的样板代码）。顺便说一下，您不必使用任何自定义插件，可以使用CASE WHEN POT_TYPE_CODE = 20 AND Cast(CASE_QTY AS DECIMAL(4,2)/SUM(CAST(CASE_QTY AS DECIMAL(4,2)) OVER (PARTITION BY LOAD_ID) > .5 THEN 'Test' WHEN PO_TYPE_CODE = 33 AND Cast(CASE_QTY AS DECIMAL(4,2)/SUM(CAST(CASE_QTY AS DECIMAL(4,2)) OVER (PARTITION BY LOAD_ID) > .25 THEN 'Test 2' END as my_new_field，查看更多here

上面的解决方案肯定会起作用，但它看起来并不好。

如何在使用redux调度操作后更新字段值

2 个答案: