警告:压扁孩子(..):遇到两个孩子

Warning: flattenChildren(...): Encountered two children

本文关键字:遇到 两个孩子 孩子 警告      更新时间:2023-09-26

我也看到过同样的问题,但不知道我的错误在哪里。

我的实时搜索框工作得很好,但一旦你删除了搜索查询(单词),反应控制台就会显示警告:

警告:压扁孩子(…):遇到两个孩子密钥.$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 ...
});