Невозможно получить идентификатор, сгенерированный firebase, при преобразовании в массив - PullRequest
0 голосов
/ 29 мая 2020

Я использую CRA & ax ios, чтобы извлечь некоторые JSON в качестве объекта из firebase, а затем преобразовать его в массив для визуализации.

Кажется, это успешно, и я могу зарегистрировать массив, однако мне кажется, что я не могу получить идентификатор, сгенерированный firebase (например, -M9SUPLwY3KgRNmOLS17)

Что мне нужно, чтобы иметь возможность перейти на правильную страницу тура.

Ожидаемый результат: / tours / -M9SUPLwY3KgRNmOLS17 / tour

Текущий результат: / tours / undefined / tour

JSX


  componentDidMount() {
    axios.get('FIREBASEURL/tours.json')
    .then(response => {
      const obj = response.data;
      const resArr = []
        for (let key in obj) {
          resArr.push(obj[key])
        }
      this.tours = resArr
      this.setState({tours: resArr})
    })
  }


  render() {
    const { tours } = this.state
   return (
      <div>
        <div className="tours">
        {tours ? (tours.map(tours => (
           <Link to={`/tours/${tours.id}/tour`} className="trslink">
            <div key={tours.id + Math.random()} className="trsIndiv">
              <h3 className="title">{tours.tour.name}</h3>
              <div className="desc">{tours.tour.description}</div>
              <p className="longdesc">
                <strong>City:</strong> {tours.tour.city}<br/>
                <strong>Duration:</strong> {tours.tour.duration} hrs<br/><br/>
              </p>

            </div>
          </Link>
          ))
        ) : (
        <div></div>
        )}
        </div>
      </div>
      )
  }

JSON пример

{
 "-GHJSDAGFAD1" : {
   "tour" : {
     "city" : "London, England",
     "description" : "Drink to your hearts content.",
     "duration" : 5,
     "full_description" : "Long Description TBC",
     "name" : "The Fighting Lion",
     "rating" : 4
   }
 },
 "-QEWURYK2" : {
   "tour" : {
     "city" : "London, England",
     "description" : "Top Pub!",
     "duration" : 2,
     "full_description" : "Long Description TBC",
     "name" : "The Frisky Goose",
     "rating" : 3.5
   }
 }
}

Я уверен, что мне не хватает чего-то простого, есть ли какой-нибудь совет? Спасибо,

1 Ответ

0 голосов
/ 29 мая 2020

Ключ документа - это JavaScript ключ объекта - иначе он не встроен в содержимое. Я думаю, вам, вероятно, понадобится что-то вроде:

  axios.get('FIREBASEURL/tours.json')
    .then(response => {
      const obj = response.data;
      const resArr = []
        for (let key in obj) {
          resArr.push(Object.assign({id: key}, obj[key]))
        }
      this.tours = resArr
      this.setState({tours: resArr})
    })

Разница в том, что Object.assign добавляет свойство id к результирующим объектам в массиве.

...