Javascript 使用lodash/fp'有什么好处；我们的方法是什么？

这是我的团队中一些人之间争论的焦点

在我们的应用程序中，我们使用apollo graphql对API进行异步查询/转换

也就是说，在过去，人们已经下定决心使用

lodash/fp

的

get

设置如下变量：

从'@apollo/hoc'导入{graphql}；
从'lodash/fp'导入{get}；
常量组件=（道具）=>{
const data=get（'data.user'，'props'）；
返回(
{data.member.name}
)
}
导出默认组合(
graphql（我的查询{
选项：{变量：{id:'abc123dorime'}
})，//异步数据
)（组成部分）

根据我继承这个应用程序的经验，这很容易出错。有时会导致错误，有时不会；基本上是一种竞赛条件。我的理论是：如果react渲染速度比解析速度快，它会使应用程序崩溃。加载状态未处理，也没有错误处理。然而，我不是100%肯定这一点，因为我真的不知道

get

是如何完全在引擎盖下工作的。这个特定示例的错误是

用户

在这里是

未定义的

有时。在我们开发时，我通常会很好，但是我们的用户在使用

get

的页面上报告了错误有时

但是，我决定不再使用

get

解析异步数据。我的方法是移动到apollo的钩子，并实际使用它提供的

加载

状态在渲染之前解析异步数据：

从'@apollo/react hooks'导入{useQuery，useVaritation}；
常量组件=（）=>{
const{data，loading，error}=useQuery（MY_QUERY{
变量：{id:'123abcdorime'}，
});
const[myMutation，{loading:mutationLoading}]=useMutation（MY_MUTATION{
变量：{id:'123'，输入：{name:'whatever'}，
未完成：（）=>doSomething（），
onError：（err）=>handleError（err），
});
返回(
{加载&&}
{！正在加载&&(
{错误&&}
{！错误&&data.user.member.name}
)}
);
}
导出默认组件；

通过这种方式，它可以在逻辑上考虑

加载状态并正确解析，并且在不使用
get
的情况下正确渲染，并且对后一种模式进行重构可以解决
get
或
getOr
在我们的生产应用程序中给我们带来的异步问题

get
from
lodash/fp
提供了一些要点，这些要点将防御性编码付诸实践，但后者在逻辑上是否也会防御性编码错误处理/加载状态

我想我最大的问题是：


什么时候
get
或
getOr
是一个好的用例
它们对处理异步数据有用吗


这纯粹是出于好奇。如前所述，这一直是我的团队和我之间的一个巨大争论点，我们应用程序中的大多数问题都源于
get
和异步数据的使用。我只是想知道我是否误解了什么，或者我/我们是否误用了
get
/
getOr
get
与异步无关您应该始终保护所有
数据
属性/字段访问（分配给其他常量/变量，作为道具传递）

const data=get（'data.user'，'props'）

。。。这是一种保护——“正常”
const data=props.data.user数据
，则代码>将失败（“著名的”react error
“无法读取未定义的属性“XXXXXXX”
）

{data.member.name}

。。。应通过
{props.data&&data.member.name}


。。。此不会失败，但会导致意外的
数据
值（
未定义
）作为道具传递，而不是预期/获取的值

如果（！props.data）返回null，则在没有
的情况下，
就足够了（在呈现正确的课程内容之前）

返回(
{加载&&}
{！正在加载&&(

你可以简单地

// '!data' is equal to 'loading' in this case
if(loading || mutationLoading) return <LoadingCircle />
if(error) return <ErrorHandler error={error} />
return (
  <>data.user.member.name</>
)

/'！data'在本例中等于'loading'
如果（加载| |突变加载）返回
如果（错误）返回
返回(
data.user.member.name
)
get
根本不是异步相关的…您应该始终保护任何
数据
属性/字段访问（分配给其他常量/变量，作为属性传递）

const data=get（'data.user'，'props'）

…这是一种保护—“正常”
const data=props.data.user；
如果未加载
data
，则会失败（“著名的”反应错误
“无法读取未定义的属性“XXXXXXX”
）

{data.member.name}

…应该受到保护，例如通过
{props.data&&data.member.name}


…此不会失败，但会导致意外的
数据
值（
未定义
）作为属性传递，而不是预期/获取的值

如果（！props.data）返回null；
（当然，在呈现正确的内容之前），如果没有
，则
就足够了

返回(
{加载&&}
{！正在加载&&(

你可以简单地

// '!data' is equal to 'loading' in this case
if(loading || mutationLoading) return <LoadingCircle />
if(error) return <ErrorHandler error={error} />
return (
  <>data.user.member.name</>
)

/'！data'在本例中等于'loading'
如果（加载| |突变加载）返回
如果（错误）返回
返回(
data.user.member.name
)