Question

嗨，我是新来的反应者，遇到了我以前解决的问题。当我键入搜索某个事件或主机时，会出现错误。

这是此搜索和筛选功能所在的位置（错误位于此处）----

 handleSearch = query => {
    this.setState({ searchQuery: query });
    this.getPagedData();
  };

  getPagedData = () => {
    const { searchQuery, events: allEvents } = this.state;

    let filtered = allEvents;
    if (searchQuery) {
      filtered = allEvents.filter(
        e =>
          e.title.toLowerCase().startsWith(searchQuery.toLowerCase()) ||
          e.hostName.toLowerCase().startsWith(searchQuery.toLowerCase())
      );
    }

    if (searchQuery.length === 0 || searchQuery.length === 1) {
      this.setState({
        events: getEvents()
      });
    } else {
      this.setState({
        events: filtered
      });
    }

    return { totalCount: filtered.length };
  };

这是searchBox文件-----

const SearchBox = ({ value, onChange }) => {
  return (
    <div className="search-box">
      <input
        className="search-txt"
        type="text"
        name="query"
        placeholder="search"
        value={value}
        onChange={e => onChange(e.currentTarget.value)}
      />
      <a className="search-btn" href="">
        <i className="fa fa-search" />
      </a>
    </div>
  );
};

这就是我所谓的搜索组件------

<SearchBox
          value={this.state.searchQuery}
          onChange={this.handleSearch}
/>

这是事件所在的fakeEvents文件----

const events = [
  {
    _id: "1",
    eventPicture: "event1.jpeg",
    hostID: "111",
    hostPicture: "profile1.jpg",
    eventTime: "Aug 1, Thu 8:00pm",
    title: "Basketball",
    numberOfAtendies: "12 people are attending",
    location: "5 miles away",
    details:
      "this is a 5 on 5 basketball game and I am looking for advanced players best 2 games out of 3 this is a 5 on 5 basketball game and I am looking for advanced players best 2 games out of 3 this is a 5 on 5 basketball game and I am looking for advanced players best 2 games out of 3.",
    category: { _id: "1and1", name: "Sports" },
    liked: ""
  },

这是用户信息来自的fakeUsers文件----

const users = [
  {
    _id: "111",
    name: "Sami Baghban",
    age: "20",
    picture: "profile1.jpg",
    interests: [
      "Basketball",
      "Soccer",
      "Movies",
      "Coding",
      "Shopping",
      "Football",
      "Hiking"
    ],
    discription:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat maiores non aliquid pariatur iste aspernatur sapiente sunt voluptatem necessitatibus, nostrum eaque nulla alias porro nisi quisquam tempora minima cupiditate quidem!",
    numOfFriends: 400,
    numOfEvents: 50
  },

这是事件文件的状态----

class Events extends Component {
  state = {
    events: getEvents(),
    user: getUser(),
    users: getUsers(),
    showDetails: false,
    shownEventID: 0,
    showUserProfile: false,
    shownUserID: 0,
    searchQuery: ""
  };

错误消息

TypeError: Cannot read property 'toLowerCase' of undefined
allEvents.filter.e
src/components/events.jsx:108
  105 | 
  106 | let filtered = allEvents;
  107 | if (searchQuery) {
> 108 |   filtered = allEvents.filter(
      | ^  109 |     e =>
  110 |       e.title.toLowerCase().startsWith(searchQuery.toLowerCase()) ||
  111 |       e.hostName.toLowerCase().startsWith(searchQuery.toLowerCase())

Answer 1

您的实现非常复杂。这是一个非常相似的工作示例，但确实使用了React Hooks（如果您仍然对React有所了解，您可能不想研究它）

import items from "./items";

const SearchExample = () => {
  const [filterText, setFilterText] = useState("");

  const filteredItems = items.filter(
    item =>
      item.description.toLocaleLowerCase().includes(filterText) ||
      item.title.toLocaleLowerCase().includes(filterText)
  );

  const itemsToDisplay = filterText ? filteredItems : items;

  return (
    <div style={{ padding: "20px 50px" }}>
      <h1>Search Page</h1>
      <input
        type="text"
        placeholder="Filter items by keyword"
        value={filterText}
        onChange={e => setFilterText(e.target.value.toLocaleLowerCase())}
      />
      <hr />
      {!filteredItems.length && (
        <div>There are no items to display adjust your filter criteria</div>
      )}
      {itemsToDisplay.map(item => (
        <div key={item.title}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default SearchExample;

其中的项是一个数组，如：

  {
    title: "React",
    description:
      "React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies."
  }
]

如何过滤搜索中的反应？

1 个答案: