Javascript <；span>；不能显示为<；的子级；选择>；反应

我已经创建了一个选择下拉组件，我正在react redux应用程序的redux表单中使用它。该下拉列表非常有效，对性能没有影响，但在浏览器中我收到以下警告

警告：validateDOMNesting（…）：不能显示为的子级。

---

我不确定为什么会收到此错误，因为我没有传递任何

元素。下面是我用来创建“选择”下拉列表的代码（选项是一个包含每个选项属性的对象数组。option.text是一个字符串值，用户将查看它。因此它可能类似于“选项1”或“选项2”。）

返回(
{
options.map（（选项）=>{
返回{option.text}
})
} 
)

---

关于我为什么会收到这一警告，以及如何纠正这一点的任何想法。我使用的是react 0.14.3

您有一个变量重新定义问题。map函数参数称为“option”，因此在编写

时，react将尝试将变量

option

引用的对象视为react类。试试这个-

return (
  <select {...other}>
  <option /> {
    options.map((optionNode) => {
      return <option key={optionNode.value} value={optionNode.value}>{optionNode.text}</option>
    })
  } </select>
)

返回(
{
options.map（（optionNode）=>{
返回{optionNode.text}
})
} 
)

您的jsx语法中似乎有一些额外的空格创建了

span

。 我已经测试了您的代码，经过正确的重新缩进后，错误消失了

在出现错误之前：

---

重新缩进后：

好吧，什么是

选项。text

？谷歌搜索选择了“升级到0.12.0版本的reactable，0.14.3版本的react/ReactDOM，并且没有注意到任何错误”选项。text是一个字符串值，用户可以查看。因此，它可能类似于“选项1”或“选项2”。这是页面上唯一的选择吗？@DaveNewton是的，这是页面上唯一的选择，并且正在使用redux表单创建的表单中使用。我不认为这是问题的原因，我替换了您的代码，并得到了相同的错误。此外，下拉列表渲染效果良好（当我使用参数

选项

或

optionNode

时，它只是发出一个警告。虽然此警告确实阻止了我的应用程序中的任何功能，但它对我希望避免的其他开发人员来说是一个麻烦和潜在的干扰。您是否使用react-dev工具检查了呈现的层次结构？我在se我在

映射

函数之后有了

；

如下：

{this.state.items.map（（oneItem）=>{…}；

。删除

；

修复了我的问题。

return (
  <select {...other}>
  <option /> {
    options.map((optionNode) => {
      return <option key={optionNode.value} value={optionNode.value}>{optionNode.text}</option>
    })
  } </select>
)