我正在嘗試用喜歡的方式渲染評論并回圈播放。請參閱演示圖片。
- 所有這些都來自 data.json
- 如何回圈所有評論？我只顯示了一個。我在這里缺少什么？
對不起，我正在盡我最大的努力做出反應，因為我是一個初學者。
演示
我的 index.js
import React from "react";
import styles from "./styles";
const Posts = (props) => {
const { data } = props;
const comments = data.edge_media_to_comment.edges[0].node.text
const locationName = data.location.name
const username = data.owner.username
const id = data.id
const url = `https://www.instagram.com/${data.owner.username}`
const likes = data.edge_media_preview_like.count
return (
<>
<a href={url} rel="noopener noreferrer" target="_blank" key={id}>
<img src={data.owner.profile_pic_url} />
</a>
<span>{locationName}</span>
<a href={url} rel="noopener noreferrer" target="_blank" key={id}>@{username}</a>
<p>{username}</p>
<hr />
<ul>
<li>
{comments !== null ? comments.toLocaleString() : 0}
</li>
<li className="post-item-likes">
{likes !== null ? likes.toLocaleString() : 0}
</li>
</ul>
<hr />
</>
);
};
export default Posts;
uj5u.com熱心網友回復：
在您的Post組件中需要使用data.commentsfromprops和 use.map
方法來呈現多個評論而不是comments.toLocaleString()
例子：
import React from "react";
const Posts = (props) => {
const { data } = props;
console.log('007',data);
return (
<>
<img src={data.owner.profile_pic_url} />
<span>{data.location.name}</span>
<a href="" target="_blank">
@{data.owner.username}
</a>
<p> {data.owner.username}</p>
<hr />
<div>
{data?.comments?.map(comment => {
return (<div>
{comment?.text} - {comment?.likeCount}
</div>)
})}
</div>
</>
);
};
export default Posts;
uj5u.com熱心網友回復：
您需要映射評論陣列，并為每個評論回傳文本和喜歡。
宣告評論 - 下面const { data } = props;：
const comments = data.comments;
作為回報，添加以下內容：
<ul>
{comments.map((comment) => (
<li>
{comment.text} - {comment.likeCount}
</li>
))}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338451.html
標籤：反应