Блог

Главная - Вопросы по программированию - В GatsbyJS, при передаче реквизитов на связанную страницу, как установить defaultProp?

В GatsbyJS, при передаче реквизитов на связанную страницу, как установить defaultProp?

#javascript

Вопрос:

У меня возникает TypeError: Cannot read property 'serviceCategory' of null проблема, когда обновляется «связанная страница» (f5) или когда страница посещается как прямой трафик.

Я пробовал устанавливать значения по умолчанию, но это не срабатывает.

Вот моя текущая настройка:

 <Link
  to="/locations"
  state={{
    serviceCategory: "FILTER",
  }}
>

связанная страница

 const Locations = ({ location }) => {

  const { state = {} } = location
  const { serviceCategory } = state

  const [category, setCategory] = useState(() => {
    return location.state === null ? "ALL" : serviceCategory
  })
}

...

Locations.defaultProps = {
  location: {
    state: {
      serviceCategory: "ALL",
    },
  },
}

export default Locations

defaultProps в документации Гэтсби нет места, поэтому я думаю о другом решении.

Ответ №1:

В defaultProps этом случае это не сработает, потому что Гэтсби использует @reach/router внутренне, и props.location это переопределяет значение.

Вы можете либо использовать другое имя переменной внутри defaultProps , либо использовать значение по умолчанию для состояния.

 const state = location.state || { serviceCategory: 'ALL' }

Обратите внимание, что

  const { state = {serviceCategory:'ALL'} } = location

не будет работать, потому что инициализатор по умолчанию при деструктуризации работает только для undefined значений, а не null для значений. И в этом случае ваше значение равно нулю.

Метки: , ,