如何使用 React 进行下拉菜单答案

【问题标题】：How to do dropdowns with React如何使用 React 进行下拉菜单
【发布时间】：2021-10-08 23:08:41
【问题描述】：

我正在尝试使用 react 组件制作下拉菜单，但锚标签未呈现。单击时，锚点应位于下拉列表中，但它们不会出现。如果getItems() 失败，默认下拉菜单应该只是说正在加载。关于下拉菜单有什么建议吗？

Dropdown.js

<li className="nav-item dropdown">
  <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img src={shoppingCart} alt="shopping cart" className="" style={{ width: "30px", height: "30px"}}></img>
  </a>
  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
    <CartItems></CartItems>
  </div>
</li>

CartItems.js

export default function CartItems() {

    const { currentUser } = useAuth();
    const [itemsRef, setItemsRef] = useState([]);


    async function getItems() {
        if(currentUser !== null) {
            const q = query(collection(db, currentUser.uid));
            console.log('q', q);
            const querySnapshot = await getDocs(q);
            console.log("snapshot", querySnapshot);
            setItemsRef(querySnapshot);
            console.log('items', itemsRef)
            querySnapshot.forEach((doc) => {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
            });
        }
       
    }

    useEffect(() => {
        getItems();
    }, [])

    if(itemsRef !== undefined && itemsRef !== null && itemsRef.length !== 0) {
    return(
        <>
            {
                itemsRef.forEach((item, index) => {
                    return <CartItem key={index} item={item} />
                })
            }
        </>
    );
    } else {
        return <a className="dropdown-item" href="#">Loading Cart...</a>
    }
}

CartItem.jsx

class cartItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }
    render() { 
        return <a className="dropdown-item" href="#">
            <img src={this.props.item.image} style={{width: "10px", height: "17px"}}></img>
            <p>{this.props.item.title}</p>
            <button ></button>
        </a>
    }
}
 
export default cartItem;

任何原因这不起作用？

【问题讨论】：

代码乍一看还不错。 “他们没有出现” 与其描述什么没有出现，你能告诉我们什么出现了吗？
我很抱歉。单击时，下拉菜单根本不会弹出。 url 只是更改为 /#，这是唯一的更改。

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

问题是querySnapshot是一个对象，需要转成数组。

async function getItems() {
        if(currentUser !== null) {
            const q = query(collection(db, currentUser.uid));
            console.log('q', q);
            const querySnapshot = await getDocs(q);
            console.log("snapshot", querySnapshot);
            
            let array = [];
            querySnapshot.forEach((doc) => {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
                array.push(doc.data());
            });
            // console.log(array);
            setItemsRef(itemsRef => [...itemsRef, array]);
            console.log('items', itemsRef);
        }
       
    }

而且下拉需要用 react bootstrap 来完成

import Dropdown from 'react-bootstrap/Dropdown'

<Dropdown.Menu>
    <CartItem />
</Dropdown.Menu>

其中 CartItem 算作 <Dropdown.Item>。

【讨论】：