如何解决过滤时反应丢失检查
我不知道如何将“活动”添加到用户状态中。
为了在此处发布此内容,我对该州的一些用户进行了硬编码,但他们应该是从 API 中获取的 - 而这并没有带有“活动”。我需要能够标记复选框,以便特定用户变为活动状态,也 如果活动 - 通过文本输入在列表中进行搜索时必须保持活动状态,因此它不会重置。根据我写的内容,我对 user.active
没有定义。有什么建议吗?
App.js
import './App.css';
import UserList from './components/UserList';
import './style/style.css';
function App() {
return (
<div className="App">
<UserList />
</div>
);
}
export default App;
UserList.js
import React,{ useState,useEffect } from 'react';
function UserList() {
const [users,setUsers] = useState([
{
id: 681,first_name: 'James',last_name: 'Smith',email: 'example1',gender: 'm',},{
id: 3123,first_name: 'Richard',last_name: 'Greene',email: 'example2',{
id: 512,first_name: 'Denise',last_name: 'Bank',email: 'example3',gender: 'f',{
id: 654,first_name: 'Carl',last_name: 'Ross',email: 'example4',]);
const [search,setSearch] = useState('');
const [filteredUsers,setFilteredUsers] = useState();
const [checkedUsers,setCheckedUsers] = useState('');
useEffect(() => {
const fetchUsers = async () => {
try {
const result = await fetch(users);
result.sort(function (a,b) {
if (a.last_name.toLowerCase() < b.last_name.toLowerCase()) return -1;
if (a.last_name.toLowerCase() > b.last_name.toLowerCase()) return 1;
else return;
});
setUsers(result);
} catch (error) {
console.log(error);
}
};
fetchUsers();
},[]);
useEffect(() => {
setFilteredUsers(
users.filter(
(user) =>
user.first_name.toLowerCase().includes(search.toLowerCase()) ||
user.last_name.toLowerCase().includes(search.toLowerCase())
)
);
},[users,search]);
useEffect(() => {
setCheckedUsers(users.filter((user) => user.active));
},[users]);
const changeChecked = (id) => {
users.forEach((user) => {
if (user.id === id) {
console.log(user);
if (user.active === '') {
user.active = true;
} else user.active = false;
}
});
setUsers(users);
console.log(checkedUsers);
};
return (
<div className="list-container">
<div className="search">
<input
type="text"
placeholder="Search for users"
onChange={(event) => setSearch(event.target.value)}
/>
</div>
{filteredUsers &&
filteredUsers.map((user) => (
<div
className="user-block"
key={user.id}
onClick={() => console.log(user.id,user.active)}>
<div className="details">
<h5>
{user.first_name} {user.last_name}
</h5>
<p>{user.email}</p>
</div>
<input
type="checkBox"
checked={user.active}
onClick={(event) => changeChecked(user.id)}
/>
</div>
))}
</div>
);
}
export default UserList;
解决方法
这里有几点:
-
我认为您应该在获取后映射用户以添加具有默认值的活动,因此在任何情况下都不是未定义的:
useEffect(() => { const fetchUsers = async () => { try { const request = await fetch(users); const response = request.map(data => ({...data,active: true})).sort(function (a,b) { if (a.last_name.toLowerCase() < b.last_name.toLowerCase()) return -1; if (a.last_name.toLowerCase() > b.last_name.toLowerCase()) return 1; else return; }); setUsers(response); } catch (error) { console.log(error); } }; fetchUsers(); },[]);
-
你过滤的用户绝对没用,你可以用用户本身来做,完全失去 useEffect 和状态变量:
users.filter(user => user.first_name.toLowerCase().includes(search.toLowerCase()) || user.last_name.toLowerCase().includes(search.toLowerCase()) ).map((user) => ( <div className="user-block" key={user.id} onClick={() => console.log(user.id,user.active)}> <div className="details"> <h5> {user.first_name} {user.last_name} </h5> <p>{user.email}</p> </div> <input type="checkbox" checked={user.active} onClick={(event) => changeChecked(user.id)} /> </div> )
-
最后但并非最不重要的一点是,您的 changeChecked 函数正在改变数组。我也会使用 .map 而不是 forEach:
const changeChecked = (id) => { setUsers( users.map(user => { if (user.id === id) { return { ...user,active: !user.active }; } else { return user; } }) ); console.log(checkedUsers); };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。