javascript - 如何在从另一条路线点击后立即获得徽章渲染

Question

这是我的第一篇文章，如果我不够具体或犯了愚蠢的错误，请多多包涵

所以我正在用 ReactJS(基本的 Reactjs:没有 redux 或任何数据库)为我的学期项目建立一个商店，如果它很重要，我刚开始学习 JS 和 REACT。

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

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

假设我在位于文件夹 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(里面包含badge).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

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

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