警告:压扁孩子(..):遇到两个孩子
Warning: flattenChildren(...): Encountered two children
我也看到过同样的问题,但不知道我的错误在哪里。
我的实时搜索框工作得很好,但一旦你删除了搜索查询(单词),反应控制台就会显示警告:
警告:压扁孩子(…):遇到两个孩子密钥
.$1
。子密钥必须是唯一的;当两个孩子共享一个密钥时,将只使用第一个子项。
这是我的整个jsx文件:
var SearchBox = React.createClass({
doSearch:function(){
// remove .getDOMNode() for newer version of reat-rails 1.4.x
var query = (this.refs.searchInput.value).toLowerCase(); // this is the search text
this.props.doSearch(query);
},
render:function(){
return <input type="text" ref="searchInput" placeholder="Search title, country and city" value={this.props.query} onChange={this.doSearch}/>
}
});
var DisplayTable = React.createClass({
render:function(){
//making the cards to display
var cards=[];
var default_url = "/assets/profile_avatar/thumb/missing.png";
this.props.data.map(function(s) {
cards.push(
<a href={'/users/' + s.user.id + '/supports/' + s.id} key={s.id}>
<div className="card">
<div className="row">
<div className="small-5 large-6 columns">
<h5>{s.support_title}</h5>
</div>
<div className=" fi small-3 large-3 columns">
Reward: {s.reward_after_support}
</div>
<div className="small-4 large-3 columns talr">
{s.remote_support == 'on' ? 'Remote / Anywhere' : s.city + ', '+ s.country}
</div>
<hr />
<div className="cl">
<img className="profile-img" src={ s.profiles[0].avatar_file_name === null ? default_url : s.profiles[0].avatar_url}></img><span>{s.profiles[0].first_name}</span>
</div>
<div className="cr">
Applications: {s.interest_recieved} |
Posted: {moment(s.created_at).fromNow()}
</div>
</div>
</div>
</a>
)
});
//returning the card
return(
<div>
{cards}
</div>
);
}
});
var InstantBox = React.createClass({
doSearch:function(queryText){
//console.log(queryText)
//get query result
var queryResult=[];
this.props.data.map(function(s){
if(s.support_title.toLowerCase().indexOf(queryText)!=-1) {
queryResult.push(s);
}
if (s.city != null) {
if(s.city.toLowerCase().indexOf(queryText)!=-1) {
queryResult.push(s);
}
}
if (s.country != null) {
if(s.country.toLowerCase().indexOf(queryText)!=-1) {
queryResult.push(s);
}
}
});
this.setState({
query:queryText,
filteredData: queryResult
})
},
getInitialState:function(){
return{
query:'',
filteredData: this.props.data
}
},
render:function(){
return (
<div className="InstantBox">
<div className="search">
<SearchBox query={this.state.query} doSearch={this.doSearch}/>
</div>
<DisplayTable data={this.state.filteredData}/>
</div>
);
}
});
我真的不认为有什么问题。我是不是错过了什么?
代码中的奇怪之处在于,indexOf()!=-1
只有在传递的字符串不为空时才有效。所以
'Milan'.indexOf('M') // = 0
'Milan'.indexOf('Q') // = -1
'Milan'.indexOf('') // = 0 !!
因此,如果您的搜索字符串为空,doSearch()
实际上会将任何城市的所有记录添加到搜索结果中,并且如果它也有任何国家,则添加相同的记录。
最后一位导致搜索结果中有多个具有相同id的项目。react不喜欢这样。
此外:如果您有一个city="Paris"的记录,并且country是"France",那么您搜索"r"的查询将导致相同的错误。字母"r"在城市->添加记录。字母"r"也在国家/地区->将再次添加相同的记录。
完整的解决方案还需要确保每个记录只添加一次:
if ( queryText == '' // if no search, then show all
|| s.support_title.toLowerCase().indexOf(queryText)!=-1
|| (s.city && s.city.toLowerCase().indexOf(queryText)!=-1)
|| (s.country && s.country.toLowerCase().indexOf(queryText)!=-1) ){
queryResult.push(s);
}
这样可以确保每个记录只添加一次。
旁注:你填写卡片的方式可以简化,并且有一些不必要的代码。你也可以做:
cards = this.props.data.map(function(s) {
<a ...
});
相关文章:
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 反应.js:同一父母的两个孩子之间的通信
- warning.js:45警告:flatchChildren(..):遇到两个具有相同密钥`.1:$.`的孩子
- 正在破坏分配.分配对象和它's的孩子在两个不同的变量中
- jQuery:查找前两个孩子
- 反应:遇到两个孩子拿着同一把钥匙
- 警告:压扁孩子(..):遇到两个孩子
- 如何将一个孩子附加到两个父母
- react本机路由器流量遇到两个具有相同密钥的子节点
- 我在 JSLint 中无缘无故地遇到两个错误