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

Question

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

我的情况很简单：

我有一个简单的用户表单（目前只有一个文本字段），它是一个绑定到 connect() 状态的反应视图。
我调用休息API来获取用户。
api 调用完成后，将向用户发送一个操作。
reducer 与用户一起更新存储状态。
我想 populate/update 具有检索值的表单。

解决方案一：

如果我这样设置 props 的值：

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调用return后，无法调用defaultValue

方案二：

每次状态更新时，使用带有自定义插件的 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 这个值，我有很好的使用经验（你将不得不编写更少的样板代码）。顺便说一句，你将不必使用任何自定义插件，你可以使用initialValues，查看更多here

上面的解决方案肯定可以，但似乎不太好。

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

How to update a field value after action dispatched with redux

javascript

reactjs

redux

redux-form