- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我看过this same issue但无法弄清楚我的错误在哪里。
我的实时搜索框工作得很好,但是一旦你删除了你的搜索查询(单词),警告就会出现在 react 控制台中:
Warning: flattenChildren(...): Encountered two children with the same key,
.$1
. Child keys must be unique; when two children share a key, only the first child will be used.
这是我的整个 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 不喜欢这样。
另外:如果你有一条记录,城市=“巴黎”,而国家是“法国”,那么你搜索“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 ...
});
关于javascript - Warning : flattenChildren(. ..):遇到两个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33391205/
我看过this same issue但无法弄清楚我的错误在哪里。 我的实时搜索框工作得很好,但是一旦你删除了你的搜索查询(单词),警告就会出现在 react 控制台中: Warning: flatte
我正在使用 Material UI 中的选项卡,其中显示按选项卡筛选的列表组件,请参阅我的容器组件中选项卡的代码:
有人可以解释一下如何修复此错误 Warning: flattenChildren(...): Encountered two children with the same key 我已经复制了下面的代
我知道这个问题之前已经被问过,但我不确定我是否理解这里发生的事情。我有一个对象数组,我在 React 组件中映射它们以创建导航:某些元素可能有子元素,因此我为这些元素添加第二个 .map 函数。一切正
我正在尝试创建一个列表并使其可点击,以便一旦我点击某个项目,我就会重定向到另一个页面 这是渲染方法 render() { const quesItems = this.state.questions
每次我两次点击抽屉中的相同元素时,我都会收到以下警告: Warning: flattenChildren(...): Encountered two children with the same ke
当我尝试映射和显示我从外部 API 获得的项目时,我收到错误消息说有相同 key 的 child ,即使我知道 ID 不同并且只显示第一张卡片。 这会引发错误,如果我使用 {test.id} 也没关系
我收到了大量此类错误,一个接一个,警告消息中附加了不同的键。有没有办法根据 id key 找出它们来自哪里? 最佳答案 找出哪里犯了关键错误通常是一件很痛苦的事情,而在 React 15 中,data
昨天我将 react-router-dom 添加到我的项目中,现在当我离开并返回导航中的 Sky 元素时,它会重新加载天空,我得到 Warning: flattenChildren(...): Enc
我是一名优秀的程序员,十分优秀!