Это мой первый пост, поэтому будьте осторожны, если я недостаточно конкретен или допустил глупую ошибку
Итак, я создаю магазин для своего семестрового проекта в ReactJS (базовый Reactjs: без редуксов или какой-либо базы данных), и, если это важно, я только начал изучать JS и REACT.
Я использую пользовательский интерфейс AntDesign и управляю маршрутами через response-router-dom, это мое файловое дерево только для понимания.
У меня есть компонент statefull, который возвращает значок корзины со значком, и этот компонент вызывается из заголовка.
Допустим, я нахожусь внутри компонента целевой страницы, который находится в папке src-> целевой страницы, и каждое нажатие на определенную кнопку должно увеличивать значок на 1.
Теперь проблема в том, что я могу видеть приращение значка только после нажатия, а не в «реальном времени» в заголовке, как мне заставить его работать в режиме реального времени через любой компонент?
Корзина (значок) .js код ->
import React, { Component } from "react";
import { Icon, Col, Badge, Button, Switch } from 'antd';
import CartCount from '../CartCount'
const ButtonGroup = Button.Group;
class Cart extends Component {
constructor() {
super();
this.state = {
count: 0,
show: true,
}
};
componentDidMount() {
var counter1 = JSON.parse(localStorage.getItem("Carts"))
if (counter1 != this.state.count) {
this.setState({ count: counter1 })
}
}
componentDidUpdate() {
var counter1 = JSON.parse(localStorage.getItem("Carts"))
if (counter1 != this.state.count) {
this.setState({ count: counter1 })
}
}
render() {
return (
<Col offset={23}>
<Badge count={this.state.count}>
<span style={{ fontSize: "50px" }} className="head-example"><Icon type="shopping-cart" /></span>
</Badge>
</Col>
)
}
}
export default Cart;
Заголовок (содержит значок внутри) .js код ->
import React, { Component } from 'react';
import { Link } from "react-router-dom";
import { Layout } from 'antd';
import Login from '../login/login'
import {withRouter} from 'react-router'
import Cart from '../CartIndex/Cart/Cart'
import { Row, Col, Button, Tabs, Icon } from 'antd';
import './Header.css'
class Header extends Component {
state=({
count: 0,
reload: false
})
render() {
const { Header } = Layout;
return (
<div>
{/*Login section*/}
<Row>
<Col span={24}>
<Login />
</Col>
</Row>
{/*Header section*/}
<Row>
<Header style={{ fontFamily: 'Anton', fontSize: "50px" }}>
<Col span="23">
<a style={{ color: "white" }} href="/">Store</a>
</Col>
<Link to="/CartIndex"><Cart/></Link>
</Header>
</Row>
</div>
);
}
}
export default withRouter(Header)
функция onClickHandler, которую я выполняю на целевой странице ->
onCartHandler = () => {
if (localStorage.getItem("Carts")) {
var counter1 = JSON.parse(localStorage.getItem("Carts"))
counter1 += 1;
localStorage.setItem("Carts", counter1)
}
else {
var Counter = JSON.stringify(1)
localStorage.setItem("Carts", Counter)
}
message.success('Successfully added to cart')
}
Я надеюсь, что вы, ребята, сможете решить и заставить меня понять, что я сделал неправильно или даже не знал с самого начала, я исследовал все компоненты жизненного цикла, но это было для меня общим, чтобы понять, не видя примеры кода.
Большое спасибо и хорошего дня в офисе