javascript - React search(filter)函数，添加参数进行搜索

Question

****编辑****:不应该像添加那么简单: client.clientno.toLowerCase().indexOf(filter) !== -1 || client.id === 过滤器？在 submitFilter 函数中？这里的问题是我收到错误“TypeError: Cannot read property 'toLowerCase' of null (匿名函数)

我正在尝试编辑我拥有的过滤器搜索功能，但我不明白在哪里添加新参数进行搜索，或者我是否应该解构对象“客户端”以进行更具体的搜索。现在我只能通过 client.text (这是客户名称)进行搜索，但我还希望能够通过 clientno (客户编号)进行搜索，这不是数字而是一个类似这样的字符串:“C123456”。有人可以解释一下我应该在哪里添加 client.clientno 参数以及如何通过该参数进行过滤而不丢失 client.text 的过滤器吗？

我的代码与“搜索过滤器”:(非常感谢您提前提供任何帮助!)

import React, {Component} from 'react';
import {Form, FormGroup, Input} from 'reactstrap';
import {StatusList} from './ClientList';
import {FormattedMessage, injectIntl} from 'react-intl';

class _SearchClientsContainer extends Component {
  constructor(props) {
    super(props);

    this.timer = null;

    this.state = {
      filter: null,
      clients: this.props.clients,
    };
  }

  changeFilter = event => {
    event.persist();
    clearTimeout(this.timer);
    this.setState({filter: event.target.value});
    this.timer = setTimeout(() => {
      this.submitFilter(event);
    }, 200);
  };


   submitFilter = event => { //<---------- my submit filter "search" function
     event.preventDefault();
     const filter = this.state.filter ? this.state.filter.toLowerCase() : '';
    const clients = filter.length === 0 ? this.props.clients : this.props.clients.filter(client => {
  return (


        client.text.toLowerCase().indexOf(filter) !== -1 || client.id === filter
 // <----- here I return the client.text and I need to filter by client.clientno as well which is a string that looks like this: C123456


      );
    });
    this.setState({clients});
  };

  render() {
    return (
      <>
        <div>
          <h3 className="mb-3">
             <FormattedMessage id="header.navbar.clientlist.title" />
          </h3>
           <Form className="mb-4" onSubmit={this.submitFilter}>
            <FormGroup>
               <Input
                 type="text"
                 placeholder={this.props.intl.formatMessage({id: 'header.navbar.clientlist.filter'})}
                 onChange={this.changeFilter}
               />
             </FormGroup>
           </Form>
         </div>
        <StatusList clients={this.state.clients} />
      </>
     );
    }
 }

 export const SearchClientsContainer = injectIntl(_SearchClientsContainer);

我忘了提及，这就是我显示列表的方式:

import React, {memo} from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';

const StatusItem = ({client}) => {
  return (
    <p className="mb-2 cursor-pointer" onClick={() => (window.location.href = client.viewLink)}>
      <strong>{client.text}</strong> {client.clientno && <span>({client.clientno})</span>}
    </p>
  );
};

StatusItem.propTypes = {
  client: PropTypes.object.isRequired,
};

const _StatusList = ({clients}) => {
  const favClients = clients.filter(c => c.favorite);
  const normalClients = clients.filter(c => !c.favorite);
  return (
    <div>
      <h3 className="mb-3">
        <FormattedMessage id="header.navbar.clientlist.favourites" />
      </h3>
      <div className="mb-4">
        {favClients.map(c => (
          <StatusItem client={c} key={c.id} />
        ))}
      </div>

      <h3 className="mb-3">
        <FormattedMessage id="header.navbar.clientlist.clients" />
      </h3>
      <div>
        {normalClients.map(c => (
           <StatusItem client={c} key={c.id} />
        ))}
       </div>
     </div>
   );
 };

 _StatusList.propTypes = {
   clients: PropTypes.arrayOf(PropTypes.object).isRequired,
 };

 export const StatusList = memo(_StatusList);

Answer 1

对于类型错误:无法读取 null 的属性“toLowerCase”(匿名函数)

(client && client.toLowerCase().clientno ? client.clientno : '').toLowerCase().indexOf(filter) !== -1 || client.id === filter

你也可以这样过滤

this.props.clients.filter(client => {
  return (
        client.text.toLowerCase().includes(filter)
        || client.clientno.toLowerCase().includes(filter)
        || client.id === filter
      );
});