Question

我有这个Firebase数据库，我在其中存储了不同的大陆。每个大洲都有一份文件，该文件是一份评论。每个文档都包含一些用户选择文档时要显示的信息。

我的问题是，每当我从Firebase查询某些数据时，该集合将保存的所有内容都会呈现。

第一张照片是我的数据库，第二张图片是当我查询某些内容时。

现在，我不确定这是因为我的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来创建要在此处显示的大洲数组。

谢谢！

Answer 1

您可以做的是添加条件，以检查条件是否已选中，并根据显示正确的评论进行

。

{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将被选中

Firebase呈现集合中的每个文档

1 个答案: