React.js “不变违规：findComponentRoot”

Question

我知道错误来自嵌套的东西和嵌套的 _.map 函数，但我不知道该怎么做。

下面是渲染函数的一部分：

我想做的是：

检查 this.props.currencylist 存在
然后显示 <select> 下拉菜单
<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

我能够重现您的错误。显然，您需要将 key 属性添加到选项标签中。我希望我能提供更好的解释，但我对 ReactJs 的了解还不够多，无法解释。

以下是根据您的代码段所做的相关更改（此处唯一的更改是添加 key 属性。我只是在此处使用货币作为键）：

_.map(this.props.currencylist, function(currency) {
     return <option key={currency} value={currency}> {currency} </option>
})

这是我用于测试的一个简单示例（稍微修改了渲染但想法相同）：

var CurrentSelector = React.createClass({
    render: function() {
        var options = this.props.currencylist.map(function(currency) {
            return <option key={currency} value={currency}> {currency} </option>
        });
        if (this.props.currencylist) {
            return <div><select id="fiatselector">{options}</select></div>
        } else {
            return <div></div>
        }
    }
});

var App = React.createClass({
    getInitialState: function() {
        return {
            currencylist: [1,2,3],
            selectedcurrency: 1,
        }
    },
    render: function() {
        return (
            <div>
                <CurrentSelector
                    currencylist={this.state.currencylist}
                    selectedcurrency={this.state.selectedcurrency} />
                <button onClick={this.handleClick}>test</button>
            </div>
        );
    },
    handleClick: function() {
        this.setState({
            currencylist: [2, 3, 4, 5],
            selectedcurrency: 2,
        })
    }
});

Answer 2

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

<option> {x} </option>

应该是：

<option>{x}</option>

前者结束渲染：

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

浏览器移除了 span 包装器，但 React 仍然希望它们存在。

React.js “不变违规：findComponentRoot”

React.js “Invariant Violation: findComponentRoot”

reactjs