React 组件中的单一职责答案

【问题标题】：Single responsibility in React componentReact 组件中的单一职责
【发布时间】：2021-08-14 14:12:05
【问题描述】：

我正在学习 React 中的单一职责原则并创建了这样的组件：

import React from "react";
import {useGetRemoteData} from "./useGetRemoteData";

export const SingleResponsibilityPrinciple = () => {

    const {filteredUsers , isLoading} = useGetRemoteData()

    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id===userId);
        alert(user.contact)
    }

    return <>
        <div> Users List</div>
        <div> Loading state: {isLoading? 'Loading': 'Success'}</div>
        {filteredUsers.map(user => {
            return <div key={user.id} onClick={() => showDetails(user.id)}>
                <div>{user.name}</div>
                <div>{user.email}</div>
            </div>
        })}
    </>
}

正如你在上面看到的，我有这个代码

const user = filteredUsers.find(user => user.id===userId);

问题是，如果我们在 React 组件中使用 map、reduce 或任何数组函数时，是否应该将逻辑从组件中提取出来，也就是说，filteredUsers.find(user => user.id===userId); 应该被提取出来，我们需要创建实用功能。因此，函数不应该关心特定的事情是如何完成的。是真的吗？

【问题讨论】：

在这种特殊情况下，无需从数组中查找用户，因为您已经可以在循环时访问完整的用户对象。你也可以写 onClick={() => alert(user.contact)} 这样你就不需要 showDetails 函数了。
不要将像 SRP 这样的良好经验法则误认为是不可侵犯的宇宙法则。由于盲目地遵循启发式而不应用批判性思维，大量的鲜血、汗水和泪水已经溢出。话虽如此，我同意@LindaPaiste 的观点，其中很多都是多余的，所以我不确定你在这里问什么。
@LindaPaiste，是的，我的错误:)，但是，总的来说，每当我们使用，比如说，映射，减少或查找我们处理某些数据时，我们应该从组件中提取逻辑吗？
如果我认为我可以在其他地方使用相同的逻辑，我个人会将它移到组件之外。说 every 数组循环应该在组件之外是过分的。数组函数并不是真正的“职责”。我认为职责是“加载用户列表”、“显示用户列表”、“显示用户详细信息”。在这方面，细节的可视化显示（现在只是一个警报）需要一个单独的组件或钩子。不是查找。

标签： reactjs single-responsibility-principle

【解决方案1】：

感谢您的提问。我想建议如下

您最好检查一下 return 中是否存在 filteredUsers。

{filteredUsers?.map(user=>{
//your code
})

您不需要获取特定用户，因为您已经在 map 方法中循环。只需简单地做这样的事情

{filteredUsers.map(user => {
            return <div key={user.id} onClick={() => showDetails(alert(user.contact))}>
                <div>{user.name}</div>
                <div>{user.email}</div>
            </div>
        })}

记住Javascript数组的find、filter方法的区别。如果根据 userId 具有唯一值，则只需使用 find 方法获取第一个值而不是数组，如果使用 filter，则获取条件数组。您确定不需要alert(user[0].contact)，而不是alert(user.contact)？

【讨论】：