反应|解析分配未定义时传递默认道具值时出错

Question

我的理解是有几种方法可以将默认值传递给React中的prop。

但是，我试过的没有一个似乎可以缓解我的问题。

基本上我想有一个默认值来防止未定义的值完全破坏应用程序。

即使用useContext()钩子反应App

const context = useContext(FarmContext)

// destructuring assigment 
const { fruit = 'foobar' } = context.data.farm[0] // apple


*****
<Compoment fruit={fruit} /> // apple

我的问题：

如果将以上数据链接起来时出现错误/拼写错误：cooontext或dattta或farm[55]

该应用程序与cannot read property ________ of undefined打破

因此我的结构水果='foobar'从未踢过。

// does not work if there's a typo on object chaining
const { fruit = 'foobar' } = context.DA23ta.farm[0] // farm is undefined

*******
<Compoment fruit={fruit} /> // app breaks

另外，我试过传递默认的prop值方法：

// does not work if there's a typo
const { fruit } = context.DA23ta.farm[0] // farm is undefined

*******
<Compoment fruit={fruit || 'foobar'} /> // app breaks

我也试过传递defaultProps作为替代，但我也无法缓解这个问题。

我得到这个有点工作的唯一场景是我将数据结构化为：

const fruit = context.data.farm[0].fruuuit // big typo at the end here


// prop will render as 'foobar' bellow
<Compoment fruit={fruit || 'foobar'} /> // foobar

我希望我的代码具有回退值，无论数据发生什么（拼写错误，超时未定义的值）。

我希望该回退默认值为解构赋值。

如果在任何地方发生错字/中断（不仅仅是在我上面显示的最后一个链接对象），我该如何添加预防性防御策略：

const { fruit = 'foobar' } = contExt.dAta.farMM[0]

我怎么还能在另一边获胜并将foobar作为水果道具返回并且由于一个未定义的道具而没有让我的整个应用程序中断？

这有可能还是可行的？我对这里没有展示的其他策略（如果有的话）持开放态度。

Answer 1

好像你需要像Ramda的pathOr这样的东西。如果值存在，则返回给定路径的值，否则返回提供的默认值。

const data = {
  context: {
    data: {
      farm: [
        { fruit: 'apple' },
        { fruit: 'orange' }
      ]
    }
  }
}

const getFruit = R.pathOr('foobar', [ 'context', 'data' , 'farm' , 0, 'fruit' ])
const getFruitWithTypos = R.pathOr('foobar', [ 'contExt', 'dataaaa' , 'form' , 0, 'fruuuuuit' ])

console.log(getFruit(data))
console.log(getFruitWithTypos(data))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>