javascript - 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 规范的摘录。 (link)

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.

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

我不知道你在哪里设置 Prop fields.对于 PostsNew 组件。当我查看您的代码时，我没有看到您为其提供任何 Prop ，因为当有人访问 posts/new 时您渲染的组件没有 Prop 。路线。

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带有 Prop 的组件。您可以改用此路线来执行此操作。 <Route path="posts/new" render={<PostsNew fields={fields} />} />
(2) 确保仅提供输入字段的有效属性。