Блог

Главная - Вопросы по программированию - Необработанное отклонение (ошибка типа): не удается прочитать свойства неопределенного (чтение параметров)

Необработанное отклонение (ошибка типа): не удается прочитать свойства неопределенного (чтение параметров)

#javascript #mern

#javascript #mern

Вопрос:

Я получаю сообщение об ошибке при демонстрации одного продукта на экране, ошибка указывается как-

 Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'params')

Код, вызывающий ошибку, является

 function ProductScreen({ match }) {
  const [product, setProduct] = useState({})

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get(`/api/products/${match.params.id}`)

      setProduct(data)
    }

    fetchProduct()
  }, [match])

Я предполагаю, что ошибка match.params.id , Но мне трудно устранить ошибку.Кто-нибудь может знать исправление этой ошибки?

Комментарии:

1. Какую react-rotuer-dom версию вы используете?? Если вы используете v6 , то оно не проходит historyProps .

2. Ну, текущая версия, которую я использую, — » «react-router-dom»: «^ 6.0.2″, »

Ответ №1:

Вы передали props в ProductScreen , но props.match не определено.
Попробуйте указать props.match непустое значение, тогда оно должно работать.

Комментарии:

1. Я попытался указать конкретный идентификатор вместо ‘$ {match.params.id }’, это сработало, но так как будут разные продукты, и мы не можем открыть конкретный продукт для всех из них

Ответ №2:

Затем используйте другие способы, такие как useNavigate hook, для доступа к истории и навигации. Обратитесь к официальному документу. v6.0.2 не передает реквизиты истории и in match.params.id , match is undefined , и именно поэтому вы получаете эту ошибку, когда пытаетесь получить доступ match.params , поскольку undefined не можете иметь свойство.

Вы должны обработать это по-другому.

Приведенный выше код показывает ошибку — «‘data’ не определен.eslintno-undef» и «‘data’ объявлен, но его значение никогда не считывается.ts(6133) «

Вы получаете эту ошибку, потому const что block scoped 

 if (match) {
        const { data } = await axios.get(`/api/products/${match.params.id}`)
}
setProduct(data)

Константы ограничены областью блока, так же, как переменные, объявленные с использованием ключевого слова let . Значение константы не может быть изменено путем переназначения (т. Е. С помощью оператора присваивания), и оно не может быть повторно объявлено (т. Е. Через объявление переменной).

Вы можете справиться с этим с помощью,

 let data;
if (match) {
    ({ data } = await axios.get(`/api/products/${match.params.id}`))
}
setProduct(data)

Я бы посоветовал вам ознакомиться с основами для лучшего понимания.

Метки: