Firebase отображает каждый документ внутри коллекции - PullRequest
Новая
       3

Firebase отображает каждый документ внутри коллекции

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

У меня есть эта база данных Firebase, в которой я, как коллекции, храню разные континенты. На каждом континенте есть документ - обзор. Каждый документ содержит некоторую информацию, которую я хочу отображать, когда пользователь выбирает документ.

Моя проблема в том, что всякий раз, когда я запрашиваю некоторые данные из Firebase, отображается все, что содержится в коллекции.

Позвольте мне показать вам картинку: https://imgur.com/a/ZuOKNCj

Первое изображение - моя база данных, второе - когда я что-то запрашиваю.

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

Вот как я спрашиваю: 

const useCountries = (continent) => {
    const [countries, setCountries] = useState([]);

    useEffect(() => {
        console.log(continent)
        firebase
            .firestore()
            .collection(continent)
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()

                }))
                setCountries(newCountries)

            })

    }, [])
    return countries
}

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

Итак, что я хотел бы показать?

Хорошо, это сайт обзора. Я использую вертикальную навигационную панель для отображения каждого континента, а затем новую навигационную панель, на которой отображается название обзора. Название обзоров также является названием документа.

Этот фрагмент кода является частью компонента, который содержит имена: 

const CountryList = ({ continent, displayFields = [] }) => {
    const countries = useCountries(continent, revName);
 ...

    return (
        <div className="countries">
            {countries.map(country => (
                <div key={country.id}>
                    <div className="entry">

                        {displayFields.includes("dest1") && (
                            <div>Destination 1: {country.dest1}
                            </div>
                        )}
                        {displayFields.includes("continent") && (
                            <div>{country.continent}</div>
                        )}
                        {displayFields.includes("revName") && (
                            <div>{country.revName}</div>
                        )}

И это revName, которое я бы хотел бы использовать для запроса.

Надеюсь, что я объяснил себя, по крайней мере, достаточно хорошо.

Изменить: https://imgur.com/a/d9iJdO1 Это вертикальная панель навигации, которая использует континенты. Я заполняю эту навигационную панель, используя: 

 <Menu className="nav-icon">
    <CountryList
      continent={props.continent}
      displayFields={["countryName"]}
    />
  </Menu>

По сути, я вызываю useCountries-hook, чтобы создать массив континентов, отображаемых здесь.

Спасибо!

1 Ответ

1 голос
/ 05 мая 2020

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

{countries.map(country => (
                <div key={country.id}>
                    <div className="entry">

                        {displayFields.includes("dest1") && country.dest1 === currentCity && (
                            <div>Destination 1: {country.dest1}
                            </div>
                        )}
                        {displayFields.includes("continent") && (
                            <div>{country.continent}</div>
                        )}
                        {displayFields.includes("revName") && country.dest1 === currentCity &&(
                            <div>{country.revName}</div>
                        )}

, где currentCity будет выбранным

...