根据反应js中地图的名称过滤数据作为搜索

Question

我正在尝试使用输入字段进行搜索，并根据名字查找名称，但我不知道该怎么做，我已经为我的代码创建了一个代码框，我将在最后给出 请帮助我，我是反应 js 的新手

{this.state.tablist == "doctor" ? (
                   <div
                     className="chat-avatar gradiantblur"
                     onClick={() => this.livechat(this.state.list.id)}
                   >
                     <div>
                       <img src={img} className="avatar" />
                     </div>
                     <div className="alignstart">
                       {this.state.list.firstname} {this.state.list.lastname}
                       <p className="margin-0">
                         {" "}
                         {this.state.list.speciality}
                       </p>
                       <p className="margin-0">
                         {" "}
                         &#10003; {this.state.list.speciality}
                       </p>
                     </div>
                     <div>152:11</div>
                   </div>
                 ) : this.state.tablist == "consultant" ? (
                   <>
                     <div className="scrollerchatlist">
                       {console.log(this.state.consulatnt)}
                       {this.state.consulatnt.map((data) => (
                         <div
                           className="chat-avatar gradiantblur"
                           onClick={() => this.livechat(data.id)}
                         >
                           <div>
                             <img src={img} className="avatar" />
                           </div>
                           <div className="alignstart">
                             {data.firstname} {data.lastname}
                             <p className="margin-0"> {data.speciality}</p>
                             <p className="margin-0">
                               {" "}
                               &#10003; {data.firstname}
                             </p>
                           </div>
                           <div>152:11</div>
                         </div>
                       ))}
                     </div>
                   </>
                 ) : this.state.tablist == "sales" ? (
                   <>
                     {" "}
                     <div className="scrollerchatlist">
                       {this.state.sales.map((data) => (
                         <div
                           className="chat-avatar gradiantblur"
                           onClick={() => this.livechat(data.id)}
                         >
                           <div>
                             <img src={img} className="avatar" />
                           </div>
                           <div className="alignstart">
                             {data.firstname}
                             {/* <p className="margin-0"> {data.firstname}</p> */}
                             <p className="margin-0">
                               {" "}
                               {/* &#10003; {data.firstname} */}
                             </p>
                           </div>
                           <div>152:11</div>
                         </div>
                       ))}
                     </div>
                   </>
                 ) : null}

                <input
                className="w-100 msserserch gradiantblur"
                  placeholder="seach messages"
                  onChange={(e) =>
                    this.setState({ serchinput: e.target.value })
                  }
              
                  type="Search"
                />

我创建的代码框如下所示，请参考我正在尝试实现的内容 如果您可以编辑我的代码并在代码框本身中给出有效的回答，我将非常有帮助

https://codesandbox.io/s/intelligent-nova-v7pb1?file=/src/App.js

Answer 1

您可以在显示数据之前应用filter 函数：

顾问

{this.state.consulatnt
          .filter((data) =>
            data.firstname
              .toLowerCase()
              .includes(this.state.serchinput.toLowerCase())
          )
          .map((data) => (
            ...
          ))}

销售

{this.state.sales.filter((data) =>
            data.firstname
              .toLowerCase()
              .includes(this.state.serchinput.toLowerCase())
          ).map((data) => (
          ...
        ))}

这是一个有效的sandbox，过滤器处理顾问和销售列表。

Answer 2

我希望这个例子对你有所帮助。我已申请顾问

{this.state.serchinput ? this.state.consulatnt.filter(item => item.firstname === this.state.serchinput).map((data) => (
    <div className="chat-avatar gradiantblur" onClick={() => this.livechat(data.id)}>
     ...
    </div>
)): this.state.consulatnt.map((data) => (
    <div className="chat-avatar gradiantblur" onClick={() => this.livechat(data.id)}>
     ...
    </div>
))}

这是工作演示https://codesandbox.io/s/filter-8i7zf