Question

****编辑****：不应该像添加client.clientno.toLowerCase().indexOf(filter) !== -1 || client.id === filter一样容易吗？在submitFilter函数中？这里的问题是我得到一个错误“ TypeError：无法读取null的属性'toLowerCase' （匿名函数）

我正在尝试编辑我拥有的过滤器搜索功能，但是我不知道在哪里添加新参数来搜索，或者是否应该解构对象“ client”以进行更具体的搜索。现在，我只能按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

对于TypeError: Cannot read property 'toLowerCase' of null (anonymous function)

(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
      );
});

反应搜索（过滤器）功能，添加参数进行搜索

1 个答案: