修正帖子列表、帖子详情的头像与名字显示问题
Change-Id: Ibcb01510f9474ea43c8739f3013c3aaa32e32640
diff --git a/Merge/front/src/components/HomeFeed.jsx b/Merge/front/src/components/HomeFeed.jsx
index 1fb12a5..2e42621 100644
--- a/Merge/front/src/components/HomeFeed.jsx
+++ b/Merge/front/src/components/HomeFeed.jsx
@@ -7,6 +7,7 @@
import { searchAPI } from '../api/search_jwlll'
import { getUserInfo } from '../utils/auth'
import { deepRecommend } from '../api/recommend_rhj'
+import postsAPI from '../api/posts_api'
import '../style/HomeFeed.css'
const categories = [
@@ -40,6 +41,7 @@
const [recMode, setRecMode] = useState('tag')
const [recCFNum, setRecCFNum] = useState(20)
const [useSearchRecommend, setUseSearchRecommend] = useState(false) // 是否使用搜索推荐模式 // JWLLL 搜索推荐功能函数
+ const [userMap, setUserMap] = useState({}) // user_id: {username, nickname}
// JWLLL搜索推荐内容
const fetchSearchContent = useCallback(async (keyword = '') => {
@@ -47,16 +49,34 @@
setError(null)
try {
const data = await searchAPI.search(keyword || activeCat, activeCat === '推荐' ? undefined : activeCat)
- const formattedItems = (data.results || []).map(item => ({
- id: item.id,
- title: item.title,
- author: item.author || '佚名',
- avatar: `https://i.pravatar.cc/40?img=${item.id}`,
- img: item.img || '',
- likes: item.heat || 0,
- content: item.content
- }))
- setItems(formattedItems)
+ // 新增：拉取详情，保证和推荐一致
+ const detailed = await Promise.all(
+ (data.results || []).map(async item => {
+ try {
+ const d = await fetchPost(item.id)
+ return {
+ id: d.id,
+ title: d.title,
+ author: `作者 ${d.user_id}`,
+ avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
+ img: d.media_urls?.[0] || '',
+ likes: d.heat,
+ content: d.content || ''
+ }
+ } catch {
+ return {
+ id: item.id,
+ title: item.title,
+ author: item.author || '佚名',
+ avatar: `https://i.pravatar.cc/40?img=${item.id}`,
+ img: item.img || '',
+ likes: item.heat || 0,
+ content: item.content || ''
+ }
+ }
+ })
+ )
+ setItems(detailed)
} catch (e) {
console.error('搜索失败:', e)
setError('搜索失败')
@@ -213,6 +233,20 @@
setLoading(false)
}, [recMode, fetchTagRecommend, fetchCFRecommend, fetchDeepRecommend])
+ // 拉取所有涉及用户的昵称
+ const fetchUserNames = async (userIds) => {
+ const map = {}
+ await Promise.all(userIds.map(async uid => {
+ try {
+ const user = await postsAPI.getUser(uid)
+ map[uid] = user.username || user.nickname || `用户${uid}`
+ } catch {
+ map[uid] = `用户${uid}`
+ }
+ }))
+ setUserMap(map)
+ }
+
useEffect(() => {
// 原始数据加载函数
const loadPosts = async () => {
@@ -225,7 +259,7 @@
return {
id: d.id,
title: d.title,
- author: `作者 ${d.user_id}`,
+ authorId: d.user_id,
avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
img: d.media_urls?.[0] || '', // 用第一张媒体作为封面
likes: d.heat
@@ -233,6 +267,9 @@
})
)
setItems(detailed)
+ // 拉取所有涉及用户的昵称
+ const userIds = [...new Set(detailed.map(i => i.authorId))]
+ fetchUserNames(userIds)
} catch (e) {
setError(e.message)
} finally {
@@ -399,8 +436,8 @@
{item.content && <div className="card-content">{item.content.slice(0, 60) || ''}</div>}
<div className="card-footer">
<div className="card-author">
- <img className="avatar" src={item.avatar} alt={item.author} />
- <span className="username">{item.author}</span>
+ <img className="avatar" src={item.avatar} alt={userMap[item.authorId] || item.authorId} />
+ <span className="username">{userMap[item.authorId] || item.authorId}</span>
</div>
<div className="card-likes">
<ThumbsUp size={16} />