React-简单的ul-li过滤器

Question

我是React的新手，正在尝试过滤.users-list中的电子邮件列表。我只想返回用户在SearchBox上键入的内容，但它不起作用。有什么建议吗？

Dashboard.js

import React, { Component } from "react";
import Button from "../Button/Button";
import SearchBox from "../SearchBox/SearchBox";
import "./Dashboard.css";
import fire from "../../fire"
class Dashboard extends Component {
constructor(){
super();
this.state = {
users:[],
searchField:''
}
}
handleLogout = () => {
fire.auth().signOut();
};
render() {
const {users, searchField} = this.state
const filteredUsers = users.filter(users => (users.users.toLowerCase.inc))
return (
<div>
<h2>Welcome</h2>
<button onClick={this.handleLogout}>Logout</button>
<div className="users-container">
<div>
<SearchBox
placeholder="Enter email..."
handleChange={(e) =>
this.setState({ searchField: e.target.value})
}
/>
</div>
<ul className="users-list">
<li>
<span>[e-mail]</span>
</li>
<li>
<span>[e-mail]</span>
</li>
<li>
<span>[e-mail]</span>
</li>
<li>
<span>[e-mail]</span>
</li>
</ul>
</div>
</div>
);
}
}
export default Dashboard;

SearchBox.js

import React from 'react';
const SearchBox = (props) => {
return(
<input 
type='search'
className='search'
placeholder={props.placeholder}
onChange={props.handleChange}
/>
)
}
export default SearchBox

Answer 1

您可以遵循：codesandbox DEMO

为了优化性能： useMemo只会在其中一个依赖项发生更改时重新计算存储的值。这种优化有助于避免在每次渲染中进行昂贵的计算。

import React, { useMemo, useState } from "react";
import "./styles.css";
const usersData = [
{id:1,email: '[e-mail]'},
{id:2,email: '[e-mail]'},
{id:3,email: '[e-mail]'},
]
export default function App() {
const [search, setSearch] = useState("");
const filteredUsers = useMemo(() => {
if (search) {
return usersData.filter(
(item) =>
item.email
.toLowerCase()
.indexOf(search.toLocaleLowerCase()) > -1
);
}
return usersData;
}, [search]);

return (
<div className="App">
<h1>users list</h1>
<input type="search" name="search" value={search} onChange={e => setSearch(e.target.value)} />
<ul>
{filteredUsers.length > 0 ?
(filteredUsers && filteredUsers.map(item => (
<li key={item.id}>{item.email}</li>
))): <div>empty</div>
}
</ul>
</div>
);
}