Как отключить кнопку голосования для обзора продукта, если идентификатор этого обзора существует в локальном хранилище?

Question

У меня есть список отзывов о некоторых продуктах в приложении React. За каждый отзыв пользователь может проголосовать, полезно это или нет. Каждый продукт может иметь несколько отзывов. Когда пользователь голосует, кнопка голосования для этого указанного c отзыва должна быть отключена. Я храню идентификаторы просмотренных отзывов в локальном хранилище в массиве в виде объектов с ключом reviewId и значением идентификатора этого обзора.

Это вспомогательный файл для хранения и получения массива отзывов в компонент React.

const reviewsStorage = window.localStorage;

export const setReview = (reviewId) => {
    if (process.browser) {
        let data = [];
        const voteId = {};

        if (reviewsStorage.getItem('vote') === null || reviewsStorage.getItem('vote') === undefined) {
            voteId.reviewId = reviewId;
            data.push(voteId);
            reviewsStorage.setItem('vote', JSON.stringify(data));
        } else {
            data = JSON.parse(reviewsStorage.getItem('vote'));
            voteId.reviewId = reviewId;
            data.push(voteId);
            reviewsStorage.setItem('vote', JSON.stringify(data));
        }
    }
};

export const getReview = () => {
    if (process.browser) {
        const votes = JSON.parse(reviewsStorage.getItem('vote'));
        return votes;
    }
};

В моем компоненте у меня есть функция feedbackSubmit, которая при запуске вызывает функцию setReview из вспомогательного файла, который устанавливает массив объектов, а затем я сохраняю этот массив в переменной vts.

vts переменная имеет такую ​​структуру:

[
  {
    reviewId: "746374"
  },
  {
    reviewId: "725364"
  }
]

jsx для этого компонента с кнопками:

const ReviewsCard = ({ reviews }) => {
    const reviewCard = reviews.map((review, index) => {
        const {
            UserNickname,
            UserLocation,
            Title,
            Rating,
            ReviewText,
            Id } = review;

        const feedbackSubmit = (e) => {
            e.preventDefault();
            setReview(Id);
            const vts = getReview();
            console.log(vts);
        };

        return (
            <div className="review-items" key={index}>
                <div className="item">
                    <p className="user-nickname">{UserNickname}</p>
                    <p className="user-location">User location: {UserLocation}</p>
                </div>
                <div className="item center">
                    <p className="title">{Title}</p>
                    <RatingStars
                        showRatingsLabel={true}
                        averageRating={Rating}
                    />
                    <p className="review-text">{ReviewText}</p>

                        <div className="feedback">
                            <p>Was this review helpful?</p>
                            <button onClick={feedbackSubmit} type="button" disabled={false}>
                                <img
                                    data-vote="Positive"
                                    className="positive-feedback-icon"
                                    src="../static/icons/green.png"
                                    alt="positive-feedback-icon"
                                />
                                {Id}
                            </button>
                            <button onClick={feedbackSubmit} type="button" disabled={false}>
                                <img
                                    data-vote="Negative"
                                    className="negative-feedback-icon"
                                    src="../static/icons/red.png"
                                    alt="negative-feedback-icon"
                                />
                            </button>
                        </div>
                    )}
                </div>
            </div>
        );
    });

    return (
        <>
            {reviewCard}
        </>
    );
};

Теперь каждый раз, когда этот компонент загружается, я буду sh чтобы проверить, находится ли Id одного из предоставленных обзоров в массиве vts, и если это так, я бы хотел отключить кнопку, которая принадлежит этому указанному c обзору.

Я новичок в React и подобных вещах для хранения и проверки значений в локальном хранилище, так что если кто-то может помочь или дать мне представление, как это можно сделать?

Answer 1

Вы можете создать state isReviewd для хранения статуса обзора, затем в useEffect получить все отзывы из localStorage и отфильтровать его с текущим идентификатором обзора и установить состояние isReviewd в соответствии с результат фильтрации.

Если фильтр возвращает результат, отключите кнопку, в противном случае включите.

Пример кода:

const ReviewsCard = ({ reviews }) => {
  const reviewCard = reviews.map((review, index) => {
    const [isReviewd, setIsReviewes] = useState(true);
    const [reviewed, setReviewed] = useState([]);

    const {
      UserNickname,
      UserLocation,
      Title,
      Rating,
      ReviewText,
      Id } = review;

    useEffect(() => {
      const vts = getReview();
      const checkReview = vts.filter(review => review.reviewId === Id);
      if (checkReview.length > 0) {
        setIsReviewes(true);
      }
    }, [reviewed]);


    const feedbackSubmit = (e) => {
      e.preventDefault();
      setReview(Id);
      const vts = getReview();
      setReviewed(vts);
      console.log(vts);
    };
    return (
      <div className="review-items" key={index}>
        <div className="item">
          <p className="user-nickname">{UserNickname}</p>
          <p className="user-location">User location: {UserLocation}</p>
        </div>
        <div className="item center">
          <p className="title">{Title}</p>
          <RatingStars
            showRatingsLabel={true}
            averageRating={Rating}
          />
          <p className="review-text">{ReviewText}</p>
          <div className="feedback">
            <p>Was this review helpful?</p>
            <button onClick={feedbackSubmit} type="button" disabled={isReviewd}>
              <img
                data-vote="Positive"
                className="positive-feedback-icon"
                src="../static/icons/green.png"
                alt="positive-feedback-icon"
              />
              {Id}
            </button>
            <button onClick={feedbackSubmit} type="button" disabled={isReviewd}>
              <img
                data-vote="Negative"
                className="negative-feedback-icon"
                src="../static/icons/red.png"
                alt="negative-feedback-icon"
              />
            </button>
          </div>
          )}
              </div>
      </div>
    );
  });
  return (
    <>
      {reviewCard}
    </>
  );