Реагировать | Ошибка передачи значений реквизита по умолчанию, когда назначение деструктуры не определено

Question

Насколько я понимаю, есть несколько способов передать значения по умолчанию для реквизита в React.

Однако, ни один из тех, что я пробовал, кажется, не смягчает мою проблему.

По существу, я 'Я хотел бы иметь значение по умолчанию, чтобы неопределенные значения не могли полностью разорвать приложение.

т.е. Реагировать на приложение с useContext() hook

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

Кроме того, я попытался передать подход значения пропора по умолчанию:

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

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

Я также пробовалПередача defaultProps в качестве альтернативы, но я не могу смягчить и эту проблему.

Сценарий only Я немного поработал, когда я структурирую данные как:

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

Похоже, вам нужно что-то вроде пути Рамды .Который вернет значение по заданному пути, если значение существует, в противном случае вернет предоставленное значение по умолчанию.

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>