如何在类Tinder本地约会APP中排除当前登录用户展示其他用户

问题背景 #

开发类似Tinder的本地约会APP时，主页从数据库获取所有用户展示，会包含当前登录用户本人，需要排除该条目，且已将用户secret存储在localStorage中。

实现步骤 #

• 从localStorage读取当前用户的secret值
• 获取用户列表后，用filter方法剔除与当前用户secret匹配的条目
• 将过滤后的用户列表存入状态用于渲染

修改后的HomePage组件代码 #

export default function HomePage() {
    const [allUsers, getAllUsers] = useState([])
    useEffect(() => {
        async function fetchUsers() {
            const resp = await get('api')
            // 从localStorage取出当前用户的secret
            const currentUserSecret = localStorage.getItem('secret')
            // 过滤掉当前登录用户
            const filteredUsers = resp.filter(user => user.secret !== currentUserSecret)
            getAllUsers(filteredUsers)
            console.log(filteredUsers)
        }
        fetchUsers()
    }, [])
    return (
        <div className='home__page'>
            <Toolbar />
            <div className="home__users">
                {allUsers && allUsers.map((user, i) => <SingleUser users={user} key={i} />)}
            </div>
            <footer className='footer'>
                <p>All rights reserved by Cartoon Match organization. To read more about our policy <Link to='/policy'>click here</Link>. </p>
            </footer>
        </div>
    )
}

补充说明 #

• 如果用户数据不用secret作为唯一标识（比如用userId），只需把过滤条件替换为对应字段即可，例如：user.id !== currentUserId
• 要确保localStorage存储的标识与后端返回的用户数据中对应字段完全匹配，避免过滤失效

内容的提问来源于stack exchange，提问作者Paulius