Нужно получить отзывы о месте при нажатии, чтобы показать внутри элемента - PullRequest
Новая
       17

Нужно получить отзывы о месте при нажатии, чтобы показать внутри элемента

0 голосов
/ 06 января 2020

Я работаю над проектом соседства, используя react и google-maps-react и обычный javascript, который показывает близлежащие рестораны в зависимости от местоположения браузера пользователя. мой код содержит 2 компонента. Первый - это Карта , а второй - listItem , представляющий ресторан.

  • Карта выполняет поиск и получить сведения о местах, включая отзывы, в отдельных функциях
  • ListItem отображать сведения о месте в боковом списке на основе данных, переданных с карты с использованием props, но отзывы отображаются только при нажатии на сам элемент, который щелкает, также скрывает все остальные элементы в списке
  • Все элементы в списке снова отображаются при перетаскивании карты

Проблема

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

Я понимаю, что существует некая петля / конфликт, возникающий между двумя компонентами, который портит все данные.

Ниже приведена функция, которая рисует listItems в * 1033. * M ap 

itemsLoop(filter){
        return this.state.markers.map((marker, index) => {
            if (Math.floor(marker.rating) == filter || filter == 0) {
                return <ListItem
                    key={index}
                    markerID={marker.id}
                    markerName={marker.name}
                    markerAddress={marker.address}
                    markerRating={marker.rating}
                    markerIcon={marker.icon}
                    itemReviews={this.getPlaceReviews.bind(this, marker.id)}
                    reviews={this.state.reviews}
                ></ListItem>
            }
        });
    }

этот реквизит itemReviews={this.getPlaceReviews.bind(this, marker.id)} передает функцию, ответственную за получение отзывов, компоненту listItem , который вызывается внутри функции с именем reviewsFn, которая вызывается внутри функции работает по клику. также этот реквизит reviews={this.state.reviews} используется и в reviewsFn, здесь есть функция: 

reviewsFn = (id) =>{
    let author, rating, review;
    this.props.itemReviews(id);
    let node = document.querySelector('#' + this.props.markerID + ' .item-details .review_list');
    node.innerHTML = '';
    for (var i = 0; i < this.props.reviews.length; i++) {
        Object.entries(this.props.reviews[i]).forEach(
            ([key, value]) =>{
                switch (key) {
                    case 'author':
                        author = value;
                        break;
                    case 'rating':
                        rating = value;
                        break;
                    case 'text':
                        review = value
                        break;
                    default:
                        break;
                }
        });
    }
}

Что я должен сделать, чтобы получить отзывы о месте, когда оно выбирается в списке с учетом использования этих 2 компонента?

...