Блог

Главная - Вопросы по программированию - Я хочу получить доступ к переменной count в badgecontent в styledbadge для добавления в корзину значка в методе возврата я подсчитываю количество записей в файле json , я

Я хочу получить доступ к переменной count в badgecontent в styledbadge для добавления в корзину значка в методе возврата я подсчитываю количество записей в файле json , я

#reactjs

Вопрос:

 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 .

Ответ №1:

Вы можете сделать что-то вроде этого:

 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 один раз, когда компонент будет смонтирован, то есть когда мы начнем запрашивать данные. Если мы получим счетчик или ошибку, сохраните их в переменной состояния _(которая вызовет реакцию на повторную визуализацию компонента).

Я решил отображать пустую строку в значке во время его загрузки и игнорировать любые возникающие ошибки. Конечно, вы можете захотеть улучшить/изменить это.

Метки: ,