购物车列表显示隐藏失效

来源：4-8 【全局数据传递】组件化Context Provider

Zhang_Kyra

2021-06-23

老师您好，代码如下，每次点击isOpen值都会改变，但是style没有生效，请老师帮忙看下哪里出的问题。

interface IsOpenState {

isOpen: boolean;

}

const isOpenState : IsOpenState = {
isOpen:false
}

const ShoppingCart: React.FC = () => {

const [isOpen, setIsOpen] = useState(isOpenState);
const value = useContext(appContext);

const handleDisplay = () => {
    setIsOpen((state)=>{
        console.log("isOpen",isOpen);
        console.log("state.isOpen",!state.isOpen);
        return {isOpen: !state.isOpen}
    });
}
return (
    <div className={styles.cartContainer}>
        <button className={styles.button}
            onClick={handleDisplay}
        >
            <FiShoppingCart />
            <span>购物车：{value.shoppingCart.items.length}件</span>
        </button>
        <div>
            <ul className={styles.cartDropDown}
                style={{
                    display: isOpen ? "block" : "none"
                }}
            >

                {value.shoppingCart.items.map(item =>
                    <li>{item.name}</li>
                )}

            </ul>
        </div>
    </div>
);

}
export default ShoppingCart;

==========

将代码修改如下，下拉列的显示与隐藏生效。
const [isOpen, setIsOpen] = useState(false);
const value = useContext(appContext);

const handleDisplay = () => {
    setIsOpen(!isOpen);
}

写回答

2回答

丛从绿草

2021-12-15

{value.shoppingCart.items.map(item => <li>{item.name}</li> )}

改成

{value.shoppingCart.items.map((i) => {

return <li key={i.id}>{i.name}</li>

})}

应该就没问题了。我是这里的问题导致不能显示。

阿莱克斯刘

2021-06-25

hello 同学，我有点迷糊，所以你现在的代码是工作的还是不工作的？我没太看明白

Zhang_Kyra

阿莱克斯刘

老师您好，不能直接return数据。 Argument of type '(state: IsOpenState) => boolean' is not assignable to parameter of type 'SetStateAction'. Type '(state: IsOpenState) => boolean' is not assignable to type '(prevState: IsOpenState) => IsOpenState'. 这个error提示我找到问题原因： display: isOpen ? "block" : "none" 应该是 display: isOpen.isOpen ? "block" : "none" useState中返回的第一个参数isOpen是一个对象。

2021-06-28

共3条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

查看课程

相似问题

添加购物车接口调用失败

回答 1

关于购物车页面→支付页面的实现逻辑

回答 1

状态已经更新了，但是购物车一直显示为0

回答 1

购物车无法显示商品数量

回答 2

怎么码失效了

回答 1

打开慕课网App查看更多内容