Flakelf
@Flakelf

Как лучше сделать сайд эффект?

Вечер в хату.

Интересует, как правильно сделать сайд эффект. Конкретно:

У меня есть компонент Card, выглядит вот так: 5cbd60ca8c69f530958520.png

Код:
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';

const Styles = styled.div`
    .row {
        padding-top: 100px; padding-bottom: 500px
    }

    .card {
        max-width: 22rem;
    }

    .likes-section {
        display: inline
    }

    .heart-image {
        float: left;
    }

    .likes-count {
        font-size: 18px;
        padding-left: 46px;
        padding-top: 4px;
    }
`;

const Card = (props) => {

    console.log(props);

    const [state, setState] = useState({
        count: 22,
        isLiked: false
    });

    useEffect(() => {
        console.log(state);
    })

    const incrementLikes = () => {
        setState({
            ...state,
            count: !state.isLiked ? state.count + 1 : state.count - 1,
            isLiked: !state.isLiked
        });
    }

    return (
        <Styles>    
            <div className="container">
                <div className="row justify-content-center">
                    <div className="card">
                        <img className="card-img-top" src="https://pp.userapi.com/c852020/v852020640/a0273/sYULVSgkNZo.jpg"
                            alt="img here" />
                        <div className="card-body">
                            <h5 className="card-title">simple anime tyan with diet pepsi сola</h5>
                            <div className="likes-section">
                                <img onClick={incrementLikes} className="heart-image" src={state.isLiked ? 'https://img.icons8.com/color/34/000000/hearts.png' : 'https://img.icons8.com/ios/34/000000/hearts.png'} />
                                <p className="likes-count">{state.count}</p>
                                <p>{state.isLiked}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Styles>
    )
}

const mapStateToProps = state => {
    console.log(state);
    return state;
}

export default connect(mapStateToProps, null)(Card);


По клику на сердечко должен поставиться лайк и сработать запрос, интуитивно понятно с чем. Как реализовать лучше? Как получить в useEffect key нужной карточки?
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вам, по-хорошему, надо передавать в карточку action, принимающий идентификатор поста и инициирующий запрос на сервер.
<Img onClick={() => likePost(post.id) />}

const mapDispatchToProps = {
  likePost,
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
irishmann
@irishmann
Научись пользоваться дебаггером
использовать data-* атрибуты
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы