从另一条路线单击后如何立即获得徽章渲染

Question

这是我的第一篇文章，如果我不够具体或犯了愚蠢的错误，请保持温和

所以我在 ReactJS 中为我​​的学期项目建立了一个商店（基本的 Reactjs：没有 redux 或任何数据库），如果这很重要，我刚刚开始学习 JS 和 REACT。

我正在使用 AntDesign UI 并通过 react-router-dom 控制路由，this is my file tree 只是为了理解。

我有一个 statefull 组件，它返回一个带有徽章的购物车图标，这个组件是从 Header 调用的。

假设我在位于文件夹 src->landingpage 中的landingpage 组件内，每次按下特定按钮时，徽章应该增加 1。

现在的问题是我只能在点击后才能看到徽章增量，而不是在标题上的“实时”，我如何通过任何组件使其实时工作？

Cart(badge).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;

Header(内含徽章).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')
}

我希望你们能解决并让我明白我做错了什么或者从一开始就不知道，我研究了所有的生命周期组件，但它对于我来说是通用的，没有看代码示例就可以理解。

非常感谢，祝您在办公室度过愉快的一天

Answer 1

您的徽章计数器绑定到您在 Cart(badge).js 中的组件状态。
这是理解组件生命周期的有趣之处，我知道这可能很难理解，但这里有一篇关于它的文章：https://blog.bitsrc.io/understanding-react-v16-4-new-component-lifecycle-methods-fa7b224efd7d
发生的事情是单击徽章会从组件生命周期中启动 componentDidUpdate 函数，这就是它通过在本地存储中搜索来更新的原因。您的本地存储和组件中的 this.state.count 之间没有直接的数据绑定，这都是在您的组件生命周期中完成的。

现在要纠正这个问题，有多种解决方案，您需要以一种或另一种方式更新组件状态，或者使用状态以外的其他机制，例如 Redux 存储（是的，这需要再次学习）。