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} 添加到输入标签时，我收到了上述错误。

我在我的代码中指的是这一行。
https://github.com/justlearncode/REACT-REDUX-FORM/blob/master/src/components/posts_new.js#L25

这里有两张截图。

如果有帮助，您可以下载我的项目并在下面的链接中进行测试。 https://github.com/justlearncode/REACT-REDUX-FORM

我该如何解决这个问题？感谢您在正确方向上的任何帮助。

Answer 1

从 redux-从 5 或更低版本迁移到 6 或更高版本将是一个很大的痛苦，因为我找不到不使用 connect 来映射状态和调度到 props 的方法，而且它不如 react 有效-redux 不会返回组件（正如我尝试的那样）...... 所以我认为降级你的反应会是一个更好的选择

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

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

Answer 2

这是因为你使用的是旧版本的 redux-form 和新版本的 react with 不兼容 react 的新 API。请考虑升级你的 redux-form。它将具有新的 API。您可以在此问题中找到更多信息：

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

Answer 3

您似乎正在将属性应用于<input>，这是不允许/无法识别的。在这种情况下，初始值。这是 HTML 规范的摘录。 (link)

以下常见的输入元素内容属性，IDL属性， 和方法适用于元素：自动完成，目录名，列表， maxlength、minlength、pattern、placeholder、readonly、required 和 大小内容属性；列表，选择开始，选择结束， 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>
);

我在您的代码中看到的另一个问题是您 destructure 标题变量。我不确定这是否是故意的，如果是这样，您必须确保标题、类别和内容仅包含 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) 确保只提供输入字段的有效属性。