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

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

以下常见的输入元素内容属性，IDL属性，和方法适用于该元素：自动完成，目录名，列表， maxlength，minlength，pattern，占位符，只读，必需和大小内容属性；列表，selectionStart，selectionEnd， selectionDirection和值IDL属性；选择（）， setRangeText（）和setSelectionRange（）方法。

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

我不知道在哪里为PostsNew组件设置道具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组件提供道具。您可以通过使用此路由来代替。 <Route path="posts/new" render={<PostsNew fields={fields} />} />
（2）确保仅提供输入字段的有效属性。

Answer 2

这是因为您正在使用旧版本的redux-form以及新版本的react与不兼容新的react API。请考虑升级您的redux-form。它将具有新的API。您可以在这里找到更多内容：

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

Answer 3

从redux迁移（从5或更低到6或更高）在脖子上将是一个很大的痛苦，因为我找不到不使用connect即可映射状态并将其分配给props的方法，并且它的反应效率不高-redux不会返回组件（正如我尝试的那样）... 所以我认为降级您的反应会是一个更好的选择

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

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

3 个答案:

要解决的问题：