React 无法识别 DOM 元素上的 `initialValue` 属性

Question

Warning: React does not recognize the `initialValue` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `initialvalue` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by PostsNew)
    in div (created by PostsNew)
    in form (created by PostsNew)
    in PostsNew (created by ReduxForm(PostsNew))
    in ReduxForm(PostsNew) (created by Connect(ReduxForm(PostsNew)))
    in Connect(ReduxForm(PostsNew)) (created by ReduxFormConnector(PostsNew))
    in ReduxFormConnector(PostsNew) (created by ConnectedForm)
    in ConnectedForm (created by RouterContext)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router

当我将

{...title}

或

{...categories}

或

{...content}

添加到

<input>

标签时，我收到上述错误。

这是两张截图。

我该如何解决这个问题？

Answer 1

看起来您正在将不允许/识别的属性应用于

<input>

。在本例中为初始值。以下是 HTML 规范的摘录。 （链接）

以下常见的输入元素内容属性、IDL属性、 和方法适用于元素：自动完成、目录名、列表、 最大长度、最小长度、模式、占位符、只读、必需和 尺寸内容属性；列表、选择开始、选择结束、 SelectionDirection 和 value IDL 属性；选择（）， setRangeText() 和 setSelectionRange() 方法。

另请参阅以下链接以获取可用输入类型的列表。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

我缺少为 PostsNew 组件设置 prop

fields.

的位置。当我查看您的代码时，我没有看到您为其提供任何道具，因为当有人访问

posts/new

路线时，您在没有道具的情况下渲染组件。

export default(
    <Route path="/" component={App} >
        <IndexRoute component={PostsIndex} />
        <Route path="posts/new" component={PostsNew} />
    </Route>
);

我在您的代码中看到的另一个问题是您“解构”了标题变量。我不确定这是否是故意的，如果是的话，您必须确保标题、类别和内容仅包含 HTML 规范中的有效属性。例如。

const title = {
  defaultValue: 'Enter title',
  type: 'text',
  id: 'title'
}

<input {...title} />
//becomes
<input type="text" id="title defaultValue="Enter title" />

修复要点：

(1)

为 PostsNew 组件提供 props。您可以使用此路线来完成此操作。

<Route path="posts/new" render={<PostsNew fields={fields} />} />

(2)
确保仅提供输入字段的有效属性。

Answer 2

https://github.com/erikras/redux-form/issues/1249

Answer 3

但是如果您选择更新，那么也许这两个链接可能对您有帮助：

https://redux-form.com/8.2.2/docs/migrationguide.md/
https://redux-form.com/6.6.2/docs/faq/howtoconnect.md/