0

Как при добовлении в корзину отключить кнопку той книги, которую добавили?

const Home = () => {
    const dispatch = useDispatch();
    const books = useSelector(state => state.books.books);
    const error = useSelector(state => state.books.error);
    const disabled = useSelector(state => state.basket.disabled);

    const [basket, setBasket] = useState([]);

    useEffect(() => {
        dispatch(fetchBooks());
    },[dispatch]);
    const addBookClick =  (id) => {
        const addedItems = books
            .filter(item => item._id === id)
            .map(item => ({
                bookId: item._id,
                author: item.name,
                bookTitle: item.title
            }));
        setBasket(prev => [...prev, ...addedItems]);
        console.log(basket);
    };
    const removeBookClick =  async (id) => {
        await dispatch(removeBook(id));
        await dispatch(fetchBooks());
    };
    
    return (
        <Grid style={{display: "flex", justifyContent: "space-between"}}>
            <Grid sx={{width: "67%"}}>
                {error ? alert(error) : null}
                {!books
                    ? <Box sx={{textAlign: 'center'}}><CircularProgress/></Box>
                    : books.map(item => {
                        return (
                            <BookItem
                                key={item._id}
                                id={item._id}
                                name={item.name}
                                title={item.title}
                                description={item.description}
                                img={item.image}
                                onClickInfo={() => gg(item._id)}
                            >
                                <Button size="small" key={item._id}
                                        disabled={}
                                        onClick={() => {addBookClick(item._id)}}
                                >
                                    Добавить
                                </Button>
                                <Button size="small" onClick={() => removeBookClick(item._id)}>Удалить</Button>
                            </BookItem>
                        )
                    })}
            </Grid>
            <Basket
                basket={basket}
            />
        </Grid>
    );
};

1 ответ 1

0

В вашу модель данных для books добавьте флаг "Выбрано"

{
    isChecked: false 
}

При нажатии на кнопку меняйте по ID значение данного атрибута на true

И при рендере проверяйте флаг

<Button size="small" key={item._id}
    disabled={item.isChecked}
    onClick={() => {addBookClick(item._id)}}
>

Второй, плохой вариант, но вариант, проверять при рендере наличие товара в корзине

<Button size="small" key={item._id}
    disabled={!!basket.find((it) => it.bookId === item._id)}
    onClick={() => {addBookClick(item._id)}}
>
7
  • второй вариант не работает 26 дек 2022 в 11:42
  • @ВиталийСычёв Поправил второй вариант. Теперь должно работать. Но использовать его я очень сильно не рекомендую!
    – SwaD
    26 дек 2022 в 11:44
  • да мне для себя разобрать 26 дек 2022 в 11:48
  • спасибо большое 26 дек 2022 в 11:48
  • если не сложно обьясните почему не стоит его использовать 26 дек 2022 в 11:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.