时间戳

首页 > 解决方案 > 如何使用本地存储单独设置评级？

reactjs - 如何使用本地存储单独设置评级？

问题描述

好的，如您所知，我正在构建一个食谱应用程序，在每个食谱详细信息页面中，我可以对食谱进行评分……但现在的问题是，当我现在对一个食谱进行评分时，为所有食谱设置了相同的评分其他食谱也是如此。知道如何解决吗？Apreciate 任何建议...非常感谢 :))

详细信息.js

import { useParams } from 'react-router-dom';
import './Details.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Image from './vitaminDfood-1132105308-770x553.jpg';
import {Link} from 'react-router-dom'
import ReactStars from 'react-rating-stars-component'
 import { RecipeContext } from './RecipeContext';
 import { useContext } from 'react';

function Details() {
  const [details, setDetails] = useState([]);
  const { recipeId } = useParams();
  const{recipes,setRecipes}=useContext(RecipeContext)
  const initialRatings = JSON.parse(localStorage.getItem("rating") || "[]");
  const[rating,setRating]=useState(initialRatings)
  useEffect(() => {
    axios
      .get(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}`)
      .then((res) => setDetails(res.data));
    
  });
  useEffect(() => {
    localStorage.setItem("rating", JSON.stringify(rating));
  }, [rating])
  


  const ratingChanged = (newRating) => {
    
    var rate={
      score:newRating
      
    }
   setRating(newRating)
    axios.post(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}/ratings`,rate)
    .then((res) => {
     console.log(res.data) 
      setRecipes(recipes)
      
    })
    
  };

  return (
    <>
      <div className="details">
        <div className="food-photo">
          <img src={Image} alt="" />
      <Link to="/"> <i className="fas fa-arrow-left arrow"></i></Link>   
          <h1>{details.name}</h1>
        </div>
        <div className="star-line">
       
        {new Array(rating).fill(null).map(() => (
          <i className="fas fa-star stari"/>
        ))}
        
        <p className="duration"><i className="far fa-clock"></i>{details.duration}<span>min.</span></p>
        </div>
        <p className="info">{details.info}</p>
        <h1 className="ingredience">Ingredience</h1>

        <div className="ing">{details.ingredients}</div>

        <h1 className="ingredience">Příprava</h1>
        <p className="description">{details.description}</p>
      </div>
    <div className="stars">

      <ReactStars
      classNames="star"
      size={48}
      onChange={ratingChanged}
      count={5}
      value={1}
      edit
      />
      </div>
    </>
  );
}

export default Details;

标签： reactjs

解决方案

你有几个选择：

  • localStorage为每个配方存储不同的密钥
  • 只需输入一个大的“评级”键，localStorage然后将其作为您的recipeId.

我认为第一个选项是最直接的，可以通过这些小的修改来完成：

const initialRatings = JSON.parse(localStorage.getItem(`ratings-${recipeId}`) || "[]");

useEffect(() => {
  localStorage.setItem(`ratings-${recipeId}`, JSON.stringify(rating));
}, [rating, recipeId])

推荐阅读