Question

在我的一个反应组件中有一个名为＆＃34; buildRow（）＆＃34;的方法，它循环遍历对象列表并使用相应的数据呈现div。例如，如果我在列表中有600个对象，并使用map循环遍历它，则所有div将在页面上呈现，并具有自己的标题等。

例如，下面的代码在我的页面上渲染了大约600个div，每个都有自己的相应数据。

 buildRow() {
     return (
   this.state.posts.map(events =>
       <div key={events.key} className='result_box'
              onClick={ () => this.click(events.name, events.description, 
              events.time)} id={events._id}>

               <p>{events.name}</p>
               {events._id}
               {events.place && events.place.location && <p>
               {events.place.location.city}</p>}
       </div>
   )
  )};

现在，我想实现搜索过滤功能。我只想返回具有特定数据参数的div。例如，如果我输入奥斯汀＆＃39;在搜索框中，只显示数据＆＃39;奥斯汀＆＃39;将在其位置呈现。代码如下：

  buildRow() {
    return (
    this.state.posts.map(events =>
      {events.place &&
        events.place.location &&
        this.props.searchVal === events.place.location.city ?
           <div key={events.key} className='result_box'
              onClick={ () => this.click(events.name, events.description, 
              events.time)}
              id={events._id}>

             <p>{events.name}</p>
             {events._id}
             {events.place && events.place.location && <p>
             {events.place.location.city}</p>}
           </div>
         : console.log(this.props.searchVal)
      }
    ) 
  )
}

我要做的是过滤并仅使用三元运算符渲染与搜索条件匹配的div。但是，这不会渲染div。然而有趣的是，三元操作按预期工作。例如，如果我输入奥斯汀＆＃39;并且＆＃39; Austin＆＃39;有5个匹配的结果，假设我们有600个对象，console.log将只打595次。我甚至测试了我在console.log里面的成功条件，那些日志显示！看来，当渲染div时，它不会发生。谁能帮我吗？

Answer 1

看起来地图回调实际上并没有返回一个值（因为表达式已被放入大括号中）。你可能想做这样的事情：

buildRow() {
    return this.state.posts
        .filter(events => 
            events.place 
            && events.place.location
            && events.place.location.city === this.props.searchVal)
        .map(events => 
            <div key={events.key} className='result_box'
                onClick={() => this.click(events.name, events.description, 
                events.time)}
                id={events._id}>

                <p>{events.name}</p>
                {events._id}
                <p>{events.place.location.city}</p>
            </div>);
}

React，三元条件内的Div不会呈现

1 个答案: