Question

我正在制作此旅行评论网站。浏览大陆组件之一时，我想从Firebase提取正确的集合。

如果我对这样的大洲进行硬编码，它会起作用：

const useCountries = (props) => {
    this.cont = "";
    const [countries, setCountries] = useState([])
    useEffect(() => {
        firebase
            .firestore()
            .collection("Africa")
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))
                setCountries(newCountries)
            })
    }, [])
    return countries
}



const CountryList = ({ displayFields = [] }) => {
    const countries = useCountries();

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

                        {displayFields.includes("continent") && (
                            <div>Name of continent: {country.continent}</div>

                        )}
                        {displayFields.includes("revName") && (
                            <div>{country.revName}</div>
                        )}
                        {displayFields.includes("countryName") && (
                            <div><Link to={"./Jumbotron"}>{country.countryName}</Link></div>
                        )}
                        {displayFields.includes("dest1") && (
                            <div>Destination 1: {country.dest1}</div>
                        )}
                        {displayFields.includes("dest2") && (
                            <div>Destination 2: {country.dest2}</div>
                        )}
                        {displayFields.includes("dest3") && (
                            <div>Destination 3: {country.dest3}</div>
                        )}
                        {displayFields.includes("beerPrice") && (
                            <div>Beer price: {country.beerPrice}</div>
                        )}
                        {displayFields.includes("foodPrice") && (
                            <div>Food price: {country.foodPrice}</div>
                        )}
                        {displayFields.includes("hostelPrice") && (
                            <div>Hostel price: {country.hostelPrice}</div>
                        )}
                        {displayFields.includes("review") && <div>Review: {country.review}</div>}
                        {displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}
                    </div>
                </div>
            ))}
        </div>
    );
};

export default CountryList

但是，正如我所说，我希望能够获取正确的数据。

我想要的是传递大陆的价值。

此侧边栏了解我在哪个洲：

const VerContinentToolbar = (props) => {


    return (
      <Menu className="nav-icon">
        <CountryList displayFields={["countryName"]} />
      </Menu>
    );

};

我想要做的是将VerContinentBar中的信息发送到国家/地区列表，将值用作变量，然后使用集合中的变量，如下所示：

  useEffect(() => {
        firebase
            .firestore()
            .collection(VARIABLE)
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))
                setCountries(newCountries)

            })


    }, [])
    return countries
}

不用说，我对React还是很陌生。我不知道如何实现这一目标。我整天都被困在这里。

我知道这不是美女。

谢谢。

Answer 1

您可以声明位于组件上方的Context。

在上下文中，您可以声明continent的属性，并从负责此操作的组件中对其进行更新。

所有组件都应将此上下文视为真理的来源。

将变量从一个组件传递到另一组件

1 个答案: