Не удалось получить подробную информацию о каждом ресторане на странице productdetail в firestore

# #javascript #reactjs #firebase #google-cloud-firestore

Вопрос:

Я создал динамическую маршрутизацию для страницы ProductDetail (у каждого ресторана есть свои собственные сведения, которые должны быть показаны на этой странице). маршрутизация работает, но я не получаю никаких данных и не могу понять, как правильно получать данные из firestore по идентификатору каждого ресторана.

PS: сведения о продукте отображаются в консоли, но проблема все еще в том, как отобразить их на странице сведений

ProductDetail.js

 import { firestore } from "../../../../../fire";

function ProductDetail() {
  const { productId }= useParams();

  const [product, setProduct] = useState();

  useEffect( () =>  {
 
   firestore
     .collection("Restaurants")
     .doc(productId).get()
     .then( doc => {
       console.log(doc.data())
       setProduct(doc.data());
     })
   }, () => {

 }
 );
 
  return (
    <div className="col-12">
      <div className="card">
        <h1>{productId.name_restaurant} </h1>
        <p>Price:${productId.Currency}</p>
        <p>{productId.email} </p>
      </div>
    </div>
  );
  }
export default ProductDetail;   
 

это моя консоль : все сведения о ресторане возвращаются
введите описание изображения здесь

Все еще не могу вернуть данные на мою страницу
введите описание изображения здесь

Ответ №1:

Как я вижу, ваше название штата product и имя парама productId . В возврате вы использовали productId неверное значение.

По мере того, как вы сохраняете данные в состоянии. Вы должны написать product вместо productId этого, как показано ниже

 <div className="col-12">
    <div className="card">
      <h1>{product?.name_restaurant} </h1>
      <p>Price:${product?.Currency}</p>
      <p>{product?.email} </p>
    </div>
</div>
 

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

1. К сожалению, это не работает, и я получаю эту ошибку : Ошибка типа : react__WEBPACK_ИМПОРТИРОВАННЫЙ_МОДУЛЬ_1__по умолчанию(…) не является функцией для строки const { productId }= useParams();

2. Если это так. Как вы получали данные на консоли

3.Я решил эту проблему, но все еще не могу ничего отобразить даже после добавления продукта вместо ProductID Ошибка : Ошибка типа: Не удается прочитать свойство ‘name_restaurant ‘неопределенного Ps; данные отображались в консоли

4. Добавить а ? после такого продукта, как product?.name_restaurant

5. Также делайте это для других. Это проверка не определена