如何在 React 中使用数据库数据创建 for 循环

Question

在Review.js 中，我正在尝试创建一个for 循环，以便<starIcon/> 根据它的评级多次显示。因此，如果它的评分为 4 星，我将在该评论区域呈现 4 星图标。我正在尝试在 JSX 中使用 for 循环（我尝试使用此来源：Loop-inside-react-jsx 但我不确定如何使用数据库数据来更改 for 循环的限制。就像 for 循环条件应该基本上是，但我不确定如何在这个项目中实现它。

(对于 i=0;i

App.js

   export default class App extends Component {
    constructor() {
        super();
    this.state = {
        language: "english"
    };
}

render() {
    return <Fragment>
        <Overview />
        <Reviews />
    </Fragment>;
}
}

Reviews.js

function Reviews({ reviews, getReviewsQuery }) {
const length = reviews.length;
return <div className="reviews">
    <div className="reviews__header">
        <h2>Reviews</h2>
        <div className="reviews__header__stars">
            <StarIcon />
            {`(${length} reviews)`}
        </div>
    </div>
    {length ? <hr /> : ""}
    <table>
        <tbody>
            {reviews.map(r => (
                <Review key={r.id} review={r} getReviewsQuery={getReviewsQuery} />
            ))}
        </tbody>
    </table>
    <hr />
    <CreateReview getReviewsQuery={getReviewsQuery} />
</div>;
}
const getReviews = gql`
query getReviews {
    reviews {
        id
        rating
        author
        comment
        created_at
    }
}
`;

export default function ReviewsHOC(props) {
    return <Query query={getReviews}>
    {({ data }) => (
                <Reviews
            {...props}
            getReviewsQuery={getReviews}
            reviews={data && data.reviews || []} // eslint-disable-line no- 
   mixed-operators
            />
        )}
    </Query>;
    }

Review.js

export default function Review({
onDeleteReview,
review: {
    id,
    rating,
    author,
    comment,
    created_at
} = {}
}) {
return <tr className="review">
    <td className="review__info">
        <div className="review__info__author">
            {author}
        </div>
        <div className="review__info__date">
            {created_at}
        </div>
    </td>
    <td className="review__details">
        <div className="review__details__rating">
            {rating} <StarIcon />
        </div>
        <div className="review__details__comment">
            {comment}
        </div>
    </td>
    <td className="review__delete">
        <TrashIcon />
    </td>
</tr>;
}

Star.js

export default function StarIcon(props) {
    return <svg className="star-icon" viewBox="0 0 20 20" {...props}>
        <path d="M10 0L6.91 6.585 0 7.64l5 5.125L3.82 20 10 16.583 16.18 20 15 12.765l5-5.125-6.91-1.056z" fillRule="evenodd" opacity=".5" />
    </svg>;
}

Answer 1

JavaScript 缺少一些其他语言所具有的“范围”方法，这阻碍了 JSX 喜欢的声明式编程。我想说两个最常见的选项是：

一个。在渲染返回中使用[...Array(count)] 技巧。

    <div className="review__details__rating">
        {[...Array(rating)].map(() => <StarIcon />)}
    </div>

b.在渲染返回的外部做一个循环，将每颗星推入一个数组（就像你链接的帖子显示的那样）

// before you `return`
let stars = [];
for (let i = 0; i < rating; i++) {
  stars.push(<StarIcon />);
}

// ...somewhere inside render's return
    <div className="review__details__rating">
        <div>{stars}</div>
    </div>