时间戳

首页 > 解决方案 > 我想在 styledbadge 中的 badgecontent 访问计数变量，以在返回方法中添加到购物车图标我正在计算 json 文件中的记录数，我

reactjs - 我想在 styledbadge 中的 badgecontent 访问计数变量，以在返回方法中添加到购物车图标我正在计算 json 文件中的记录数，我

问题描述

const NavBar = () => {

    async function getAllUsers() {
        const response = await getUsers();
        var items = response.data.length;
        var count = items;
        console.log(count);
    }
    `enter code here`

    return (

        <AppBar className={classes.header} position="static">
            <Toolbar>
                <NavLink className={classes.tabs} to="./" exact>Macine Test</NavLink>
                <NavLink className={classes.tabs} to="all" exact>All Products</NavLink>
                <NavLink className={classes.tabs} to="add" exact>Add Products</NavLink>
                <NavLink className={classes.right} to="cart"><StyledBadge badgeContent={`enter code here`} color="secondary"><ShoppingCartIcon></ShoppingCartIcon></StyledBadge></NavLink>
            </Toolbar>
        </AppBar>
    );

};

export default NavBar;

该count变量正在返回记录数，但我想badgeContent在StyledBadge.

标签： reactjs

解决方案

你可以这样做：

const NavBar = () => {

    async function getAllUsers() {
        const response = await getUsers();
        var items = response.data.length;
        var count = items;
        console.log(count);
    }

    const [[count, error], setCount] = useState([]);
    React.useEffect(() => {
        getAllUsers().then(c => setCount([c]), e => setCount([, e]));
    }, []);

    if (error) {
        // TODO: Show an error (or a default value) when `error` is set
    }

    return <AppBar className={classes.header} position="static">
        <Toolbar>
            <NavLink className={classes.tabs} to="./" exact>Macine Test</NavLink>
            <NavLink className={classes.tabs} to="all" exact>All Products</NavLink>
            <NavLink className={classes.tabs} to="add" exact>Add Products</NavLink>
            <NavLink className={classes.right} to="cart"><StyledBadge badgeContent={count || ''} color="secondary"><ShoppingCartIcon></ShoppingCartIcon></StyledBadge></NavLink>
        </Toolbar>
    </AppBar>;

};

export default NavBar;

我们保留计算值（或错误）的状态变量。React.useEffect(func, [])将在组件挂载时调用func一次，也就是我们开始查询数据的时候。如果我们得到计数或错误，将其存储在状态变量 _ 中（这将触发 React 重新渲染组件）。

我选择在加载时在徽章中显示一个空字符串并忽略发生的任何错误。当然，您可能想改进/改变这一点。

推荐阅读