Question

我正在尝试计算在 react js 中存储在本地存储中的所有 ID 的金额.. 任何帮助表示赞赏..

import React, { createContext, useReducer, useEffect } from 'react';
import { carReducer } from '../reducers/CarReducers';

export const CarContext = createContext();

const CarContextProvider = (props) => {
    const [car, dispatch] = useReducer(carReducer, [], () => {
        const localData = localStorage.getItem('car');
        return localData ? JSON.parse(localData) : [];
    });
    useEffect(() => {
        localStorage.setItem('car', JSON.stringify(car))
    }, [car])

    return (
        <CarContext.Provider value={{car, dispatch}}>
            {props.children}
        </CarContext.Provider>
    )
}

export default CarContextProvider

Answer 1

import React, { useContext } from 'react'
import { Col, Container, Row } from 'react-bootstrap';
import { CarContext } from '../contexts/CarContext';
 

const CarDetails = ({car}) => {
    const {dispatch} = useContext(CarContext);

    const totalprice = car.stock * car.price 

    const totalPrice = car.price

    return (
        <Container>
            <Row>
                <div className='box'>
                        {totalprice}
                </div>
            </Row>
            <Row>
                <Col>
                        <li onClick={() => dispatch({type: 'REMOVE_CAR', id: car.id})}>
                        <div className="title">
                            Car Make :   {car.make}
                        </div>
                        <div className='author'>
                            Car Modal :  {car.model}
                        </div>
                        <div className='author'>
                            Car ID :   {car.id}
                        </div>
                        <div className='author'>
                            Car Year  :  {car.year}
                        </div>
                        <div className='author'>
                        Car type :  {car.type}
                        </div>
                        <div className='author'>
                            Stock : {car.stock}
                        </div>
                        <div className='author'>
                            Car Price :  {totalPrice}
                        </div>
                    </li>     
                </Col>
            </Row>
           
        </Container>
    )
}

export default CarDetails

Answer 2

我正在尝试在导航栏中显示此内容

const Navbar = () => {
    const {car} = useContext(CarContext);

    const totalprice = car.price * car.length


    return(
        <div className='navbar'>
            <h1>
                Car Inventory Management System
            </h1>
            <p>Currently you have {car.length} cars in the inventory.</p>
            <p>Total:  {totalprice} </p>
        </div>
    )

}

反应js计算本地存储中的金额

2 个答案: