Reactjs 过滤列表时如何保留选中值

我有一个过滤函数“filterUsers”，处理对象的“filteredUsers”数组。每个对象都呈现为带有一些数据和复选框的列表项。每次用户更改文本输入值时，都会触发该函数。如果在过滤掉某个项目时选中了该项目，则选中的值将丢失。我需要一个解决方案来保留选中的值

const UsersList = () => {
const { users } = useContext(UsersContext);
const [checkedUsersIds, setCheckedUsersIds] = useState([]);
const [filteredUsers, setFilteredUsers] = useState([]);

useEffect(() => setFilteredUsers(users), [users]);
useEffect(() => console.log(checkedUsersIds), [checkedUsersIds]);

const checkUsers = async e => {
    if (e.target.checked) {
        const checkedUser = users.find(user => user.id === Number(e.target.name));
        setCheckedUsersIds([...checkedUsersIds, checkedUser.id]);
    } else {
        setCheckedUsersIds(checkedUsersIds.filter(user => user !== Number(e.target.name)));
    }
};

const filterUsers = e => {
    setFilteredUsers(
        users.filter(
            user =>
                user.first_name.toLowerCase().includes(e.target.value.toLowerCase().trim()) ||
                user.last_name.toLowerCase().includes(e.target.value.toLowerCase().trim())
        )
    );
};

return (
    <>
        <input
            type="text"
            name="filter_users"
            className={classes.filter_input}
            onChange={e => filterUsers(e)}
            placeholder="search user..."
            autoComplete="off"
        />

        <ul>
            {filteredUsers.length ? (
                filteredUsers.map(user => {
                    return (
                        <label key={user.id} htmlFor={user.name}>
                            <li className={classes.user_container}>
                                <div className={classes.user_subcontainer}>
                                    <div
                                        className={`${classes.avatar_container} ${
                                            user.gender === 'Male' ? classes.male : classes.female
                                        }`}
                                    >
                                        {user.avatar ? (
                                            <img className={classes.avatar} src={user.avatar} alt="#" />
                                        ) : (
                                            <div className={classes.img_alt}>
                                                {user.first_name.slice(0, 1)}
                                                {user.last_name.slice(0, 1)}
                                            </div>
                                        )}
                                    </div>
                                    <h3
                                        className={user.gender === 'Male' ? classes.male_text : classes.female_text}
                                    >
                                        {user.first_name} {user.last_name}
                                    </h3>
                                </div>
                                <div className={classes.checkbox_container}>
                                    <input type="checkbox" name={user.id} onChange={e => checkUsers(e)} />
                                </div>
                            </li>
                        </label>
                    );
                })
            ) : (
                <h1 className={classes.list_loading}>List loading...</h1>
            )}
        </ul>
    </>
);

constuserslist=（）=>{
const{users}=useContext（UsersContext）；
const[checkedUsersIds，setCheckedUsersIds]=useState（[]）；
常量[filteredUsers，setFilteredUsers]=useState（[]）；
useEffect（（）=>setFilteredUsers（用户），[users]）；
useffect（（）=>console.log（checkedUsersIds），[checkedUsersIds]）；
const checkUsers=async e=>{
如果（例如，选中目标）{
const checkedUser=users.find（user=>user.id==Number（e.target.name））；
setCheckedUsersIds（[…checkedUsersIds，checkedUser.id]）；
}否则{
setCheckedUsersIds（checkedUsersIds.filter（user=>user！==Number（e.target.name））；
}
};
常数filterUsers=e=>{
SetFilteredusters(
用户过滤器(
用户=>
user.first_name.toLowerCase（）包括（e.target.value.toLowerCase（）.trim（））||
user.last_name.toLowerCase（）包括（e.target.value.toLowerCase（）.trim（））
)
);
};
返回(
过滤器（e）}
占位符=“搜索用户…”
自动完成=“关闭”
/>

{filteredUsers.length(
filteredUsers.map（用户=>{
返回(

{user.avatar(
) : (
{user.first_name.slice（0，1）}
{user.last_name.slice（0，1）}
)}
{user.first\u name}{user.last\u name}
检查用户（e）}/>

);
})
) : (
列表加载。。。
)}

);

---

})

我在这里详细介绍了代码的一些细节，但希望它能演示如何使用checked属性：

constuserslist=（{users}）=>{
const[checkedUsersIds，setCheckedUsersIds]=React.useState（[]）；
常量[filteredUsers，setFilteredUsers]=React.useState（[]）；
React.useffect（（）=>setFilteredUsers（用户），[users]）；
//React.useffect（（）=>console.log（checkedUsersIds），[checkedUsersIds]）；
const checkUsers=e=>{
如果（例如，选中目标）{
const checkedUser=users.find（user=>user.id==Number（e.target.name））；
setCheckedUsersIds（[…checkedUsersIds，checkedUser.id]）；
}否则{
setCheckedUsersIds（checkedUsersIds.filter（user=>user！==Number（e.target.name））；
}
};
常数filterUsers=e=>{
const value=e.target.value.toLowerCase（）.trim（）；
SetFilteredusters(
用户过滤器(
用户=>
user.first_name.toLowerCase（）.includes（值）||
user.last_name.toLowerCase（）.includes（值）
)
);
};
返回(
过滤器（e）}
占位符=“搜索用户…”
自动完成=“关闭”
/>

{filteredUsers.map（用户=>{
返回(

{user.first\u name}{user.last\u name}
检查用户（e）}
checked={checkedUsersIds.includes（user.id）}
/>

);
})
}

);
};
常量应用=（）=>
;
ReactDOM.render（，document.getElementById（'root'））

可以根据user.id是否在checkedUsersIds数组中设置复选框上的checked属性。听起来您希望
checked
值成为某个用户状态的一部分，而过滤的用户是派生的过滤状态。换句话说，除了
用户
状态之外，你没有一个真实的来源可以工作。