reactjs - React.js “Invariant Violation: findComponentRoot”

Question

我知道错误来自嵌套的东西和嵌套_.map功能，但我不知道如何做到这一点。

渲染函数的一部分如下:

我想做的是:

1. 检查是this.props.currencylist存在
2. 然后显示<select>下拉菜单
3. 与 <options>来自this.props.currencylist

{ 
  this.props.currencylist ?
  <select  id="fiatselector" onChange={this.onSelectCurrency} value {this.props.selectedcurrency}>
  { 
     _.map(this.props.currencylist, function(currency) { 
       return <option value={currency}> {currency} </option>  
     })
  }
  </select>
  : 
  ""
}    

非常感谢!

顺便说一句，在第一次渲染时它工作得很好，当必须更新时它会出现错误，使用新的货币列表重新渲染会触发错误

Answer 1

这里的实际问题是值周围的空间。

<option> {x} </option>

应该是:

<option>{x}</option>

前者最终渲染:

<option><span> </span>{x}<span> </span></option>

浏览器删除了 span 包装器，但 React 仍然希望它们在那里。