Reactjs 在react中使用useEffect设置本地存储后，如何在render中将数据填充到购物车中

我正在创建一个购物车，遇到了一个问题。在讨论这个问题之前，先了解一下上下文-我这里有一个组件，它包含

addToCart

函数，其任务是获取一个包含所选项目数据的对象，对照

cartItems

检查它，如果它不存在，则将其添加到

cartItems

。更改是这样的

cartItems

然后触发useEffect钩子，它在

cartItems

中获取数据并将其发送到本地存储。到目前为止还不错

当我必须将用户从本地存储中选择的内容渲染到渲染时，就会出现问题。现在，它正在呈现所有项目接受最后选择的项目。我是否可以使发送到本地存储的对象立即显示在渲染上

代码如下

import React, { useEffect, useState } from 'react';
import Layout from '../components/global/layout/Layout';
import { Col, Row } from 'react-bootstrap';
import styles from '../components/page-css/order.module.css';

const Order = () => {
    const [ menuItems, setMenuItems ] = useState(false);
    const [ cartItems, setCartItems ] = useState([]);

    const addToCart = (selectedItem) => {
        !cartItems.includes(selectedItem) ? setCartItems([ ...cartItems, selectedItem ]) : console.log('already added');
    };

    useEffect(
        () => {
            localStorage.setItem('cartItems', JSON.stringify(cartItems));
        },
        [ cartItems ]
    );

    return (
        <Layout>
            <Row>
                {/* <Menu xs={12} className={styles.cart} addToCart={addToCart}>
                    {this is the component inside which the menu items are. Do not pay much attention to this as it does not have anything to do with my current question}
                </Menu> */}

                <Col xs={12} className={styles.cart}>
                    <h2>Your Cart</h2>
                    {console.log(localStorage.getItem('cartItems'))}
                </Col>
            </Row>
        </Layout>
    );
};

export default Order;

import React，{useffect，useState}来自“React”；
从“../components/global/Layout/Layout”导入布局；
从'react bootstrap'导入{Col，Row}；
从“../components/page css/order.module.css”导入样式；
常量顺序=（）=>{
const[menuItems，setMenuItems]=useState（false）；
常量[cartItems，setCartItems]=useState（[]）；
const addToCart=（selectedItem）=>{
！cartItems.includes（selectedItem）？setCartItems（[…cartItems，selectedItem]）：console.log（'已添加'）；
};
使用效果(
() => {
localStorage.setItem（'cartItems'，JSON.stringify（cartItems））；
},
[购物车项目]
);
返回(
{/* 
{这是菜单项所在的组件。不要太注意它，因为它与我当前的问题无关}
*/}
你的车
{console.log（localStorage.getItem（'cartItems'））}
);
};
导出默认订单；

您可以直接从

cartItems

而不是

localStorage.getItem（'cartItems'）

进行渲染。此外，如果您希望在安装组件时显示本地存储中的数据，则可以将其更新为cartItems作为初始数据。

您可以直接从

cartItems

而不是

localStorage.getItem（'cartItems'）

进行渲染。此外，如果希望在装入组件时显示本地存储中的数据，则可以将其更新为cartItems作为初始数据