React Native中使用useParams展示数据问题求助

问题分析 #

你的代码存在几个核心问题导致数据无法展示：

• 未用状态存储接口返回的卡片数据，渲染时直接引用未定义的card变量
• 加载状态load的逻辑完全颠倒，数据加载完成后反而显示"无卡片"提示
• 父子组件字段传递不匹配（父组件传mainPic，子组件用cardImg）
• 接口调用的依赖项缺失，参数更新时无法重新触发请求

修正后的代码 #

Details.jsx

import React from 'react'
import { useParams } from 'react-router-dom'
import Detail from './Detail' // 确保导入正确路径

const Details = () => {
    const userData = JSON.parse(localStorage.getItem('user'))
    const token = userData ? userData.accessToken : null
    const params = useParams()
    
    // 新增状态存储卡片数据和加载状态
    const [card, setCard] = React.useState(null)
    const [isLoading, setIsLoading] = React.useState(true)

    const getAccountDetails = React.useCallback(async () => {
        try {
            setIsLoading(true)
            const res = await fetch(`http://localhost:4000/api/account/findonecard/${params.idCard}`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
            const response = await res.json()
            console.log(response)
            // 假设接口返回的data字段是你需要的卡片对象，根据实际结构调整
            setCard(response.data || response)
        } catch (error) {
            console.error('获取卡片数据失败:', error)
        } finally {
            setIsLoading(false)
        }
    }, [params.idCard, token]) // 添加依赖项，参数变化时重新调用

    React.useEffect(() => {
        getAccountDetails()
    }, [getAccountDetails])
    

    return (
        <>
            <div>Details</div>
            {isLoading ? (
                <div style={{ position: 'relative', zIndex: 99, color: '#000', fontFamily: 'sans-serif', textAlign: 'center', margin: '60px auto' }}>加载中...</div>
            ) : card ? (
                <Detail card={{
                    username: card.fullname,
                    description: card.description,
                    cardImg: card.pic_profile, // 修正字段名，匹配子组件的cardImg
                    userTags: card.usertags
                }} />
            ) : (
                <div style={{ position: 'relative', zIndex: 99, color: '#000', fontFamily: 'sans-serif', textAlign: 'center', margin: '60px auto' }}>No Card to show</div>
            )}
        </>
    )
}

export default Details

Detail.jsx

// 确保导入需要的图片资源
import Dislike from './path/to/dislike.png'
import Like from './path/to/like.png'
import ShowMore from './ShowMore'
import SliderComponent from './SliderComponent'

const Detail = ({ card }) => {
    // 处理card为空的情况，避免渲染报错
    if (!card) return null

    return (
        <div className="content">
            <div className="content_card-container">
                <ShowMore/>
                <h2 className="content_card-username">{card.username}</h2>
                <div
                    className="content_card-image"
                    style={{
                        backgroundImage: `url(${card.cardImg})`,
                        // 建议添加默认背景样式，避免图片加载失败时显示异常
                        backgroundSize: 'cover',
                        backgroundPosition: 'center'
                    }}
                />
                <div className="content_tags-slider">
                    <SliderComponent tags={card.userTags || []} /> {/* 处理tags为空的情况 */}
                </div>
            </div>
            <div className="content_user-description">
                <p className="content_user-description-text">{card.description || ''}</p>
            </div>
            <div className="content_choice-container">
                <img src={Dislike} alt="Dislike" className="content_choice-icon" />
                <img src={Like} alt="Like" className="content_choice-icon" />
            </div>
        </div>
    )
}

export default Detail

关键修正点说明 #

1. 状态管理：新增card状态存储接口返回的数据，isLoading状态控制加载提示的显示
2. 加载逻辑修正：加载中显示"加载中..."，加载完成后如果有数据则渲染Detail，无数据显示"No Card to show"
3. 字段匹配：父组件传递cardImg字段，匹配子组件的使用
4. 依赖项补全：useCallback添加params.idCard和token依赖，确保参数变化时重新请求
5. 异常处理：添加try/catch捕获请求错误，避免页面崩溃；子组件处理空值情况，防止渲染报错

内容的提问来源于stack exchange，提问作者Yordy Mora