时间戳

首页 > 解决方案 > 在 React 中过滤用户列表

reactjs - 在 React 中过滤用户列表

问题描述

我通常从 react Hooks 构建组件，但现在我想在类组件之上构建一个用户导航过滤器。我遇到了关于用户输入的存储状态的错误。我也用钩子做了类似的事情，但只有这样它才起作用我做错了什么？

错误：TypeError：无法读取未定义的属性“toLowerCase”

代码：

import React, { Component } from "react";
import image from "../../data/logo.png";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  NavLink,
} from "react-router-dom";
import "./Navbar.css";

export default class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false, token: this.props.token, search: "" };
    this.state = { loading: true, users: [] };
  }
  menuClick = () => {
    this.setState({ clicked: !this.state.clicked });
  };
  componentDidMount() {
    fetch("/api/v1/user").then((resp) => {
      resp.json().then((json) => {
        this.setState({ loading: false, users: json.data });
        console.log(this.state.token);
        console.log(this.state.users);
        console.log(this.state.search);
      });
    });
  }

  render() {
    let list = <div>LOADING</div>;
    if (Array.isArray(this.state.users) && this.state.users.length > 0) {
      list = this.state.users
        .filter((user) => {
          if (this.state.search === "") {
            return "";
          } else if (
            user.name.toLowerCase().includes(this.state.search.toLowerCase())
          ) {
            if (user.length > 1) {
              return {
                id: user.id,
                name: user.name,
                surname: user.surname,
              };
            } else {
              console.log(typeof users);
              return user;
            }
          }
        })
        .map((user) => (
          <a>
            {user.name} {user.surname}
          </a>
        ));
    } else list = "Error with loading";

    return (
      <nav className="NavbarItems">
        <ul>
          <li>
            <a className="item search">
              <input
                className="srch-input"
                onChange={(e) => this.setState({ search: e.target.value })}
                type="text"
                placeholder="Szukaj"
              />
              <a className="srch-btn" href="#">
                <i class="fas fa-search"></i>
              </a>
            </a>
          </li>
          <li>{list}</li>
        </ul>
      </nav>
    );
  }
}

标签： reactjs

解决方案

看起来您state在构造函数中声明了两个 's。this.state被不包括 . 的第二个声明覆盖search。

将这两个声明替换为this.state = { users: [], loading: true, clicked: false, token: this.props.token, search: "" };，您应该会很好。

为了安全起见，您可能还希望对用户名进行未定义的检查。

推荐阅读