如何在使用 redux 分派操作后更新字段值

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

1. 实际上，您可能会尝试使您的组件有状态 - 在其中存储和管理输入值 (they say it's ok)。
2. 或者如果你真的需要这个值在商店使用redux-form，我有很好的使用经验（你必须编写更少的样板代码）。 顺便说一句，你不必使用任何自定义插件，你可以使用initialValues，查看更多here

上面的解决方案肯定会起作用，但似乎不太好。