如何为评分中的每 1 显示一颗星?反应 [英] How do I display a star for every 1 that is in the rating?react

问题描述

是的，所以基本上我需要根据食谱的评分显示一颗星(一些 i 元素)(5 星，所以如果分数是 3，我需要生成 3 颗星).非常感谢，感谢任何建议(我需要在 jsx 中显示现在地图函数所在的星星，即使那不是解决方案)

Details.js

import { useParams } from 'react-router-dom';导入'./Details.css';import React, { useEffect, useState } from 'react';从 'axios' 导入 axios；从'./vitaminDfood-1132105308-770x553.jpg'导入图像；从 'react-router-dom' 导入 {Link}从react-rating-stars-component"导入 ReactStars函数详细信息(){const [details, setDetails] = useState([]);const { recipeId } = useParams();useEffect(() => {公理.get(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}`).then((res) => setDetails(res.data));控制台日志(详细信息)；});const ratingChanged = (newRating) =>{无功率={评分:新评分}axios.post(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}/ratings`,rate).then((res) => {控制台日志(res.data)；})控制台日志(新评级)；};返回 (<><div className="详细信息"><div className="食物照片"><img src={Image} alt="";/><链接到=/"><i class="fas fa-arrow-left arrow"></i></Link><h1>{details.name}</h1>

<div className="star-line">{details.score.map((star,index)=>(<i class="fas fa-star"></i>))}<h1 className=duration">{details.duration}</h1>

<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 className="stars"><ReactStarsclassNames=星"大小={48}onChange={ratingChanged}/>

</>);}导出默认详细信息；

解决方案

您可以生成具有所需元素数量的数组并对其进行映射:

<代码>...{new Array(details.score).fill(null).map(() => (<i class="fas fa-star"/>))}...

Yea so basically I need to display a star(some i element) according to rating of a recipe(5 stars so if score is 3, I need to generate 3 stars). Thanks so much,apreciate any advice(I need to display the stars where now is the map func in jsx,even though thats not the solution)

Details.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'

function Details() {
  const [details, setDetails] = useState([]);
  const { recipeId } = useParams();
  useEffect(() => {
    axios
      .get(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}`)
      .then((res) => setDetails(res.data));
    console.log(details);
  });

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

  return (
    <>
      <div className="details">
        <div className="food-photo">
          <img src={Image} alt="" />
      <Link to="/"> <i class="fas fa-arrow-left arrow"></i></Link>   
          <h1>{details.name}</h1>
        </div>
        <div className="star-line">
          {details.score.map((star,index)=>(
            <i class="fas fa-star"></i>
          ))}
          <h1 className="duration">{details.duration}</h1>
        </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}
      />
      </div>
    </>
  );
}

export default Details;

解决方案

You can generate an array with the required number of elements and map over it:

...

{new Array(details.score).fill(null).map(() => (
          <i class="fas fa-star"/>
        ))}
...

这篇关于如何为评分中的每 1 显示一颗星?反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！