React子组件已挂载却接收到undefined props的问题解决

问题场景 #

在React项目中，我通过父组件请求后端获取任务详情对象，再将该对象传递给子组件Detail展示；Detail组件进一步把对象的id传给AddComment、ListComments等子组件。但ListComments组件首次渲染时，传入的taskId始终是undefined，只有修改代码触发页面重新渲染后，才能正常拿到有效值。

相关组件代码 #

父组件 TaskDetail #

const TaskDetail = () => {
    // 从URL获取参数
    const { id } = useParams()

    const [taskDetail, setTaskDetail] = useState([])

    useEffect(() => {
        TaskService.getTaskById(id)
            .then(response => {
                setTaskDetail(response.data);
            })
    }, [id]) // 依赖id避免请求无限循环
    
    if (!taskDetail) return <div>No data</div>

    return (
        <div>
            <Detail taskDetail={taskDetail}/>
        </div>
    )
}

该组件从URL提取任务id，请求后端获取任务详情对象，再传递给子组件Detail。

子组件 Detail #

const Detail = ({ taskDetail }) => {
    return (
        <Box
            align='center'
            justifyContent='center'
            sx={{ width: '100%', marginTop: 4}}
            bgcolor=''
            //border='solid'
            >
            <Stack
                //border='solid'
                sx = {{width: '50%'}}
                justifyContent='center' 
                //border='solid'
                >
                <Typography
                    sx = {{ marginTop: 5}}
                    variant='h4'
                    fontWeight='bold'
                    bgcolor='#b2dafa'  
                    >NOMBRE DEL EJERCICIO<br/>{taskDetail.taskName}</Typography>
                    <Box
                        sx = {{ marginTop: 3}}
                        bgcolor='#b2dafa'
                    >
                        <Typography
                            variant='h5'
                            align='center'
                            sx = {{ margin: 2}}
                            fontWeight='bold'  
                            >DETALLES DEL EJERCICIO</Typography>
                        <Typography
                            sx = {{ margin: 2}}
                            variant='text'
                            border='#555'
                            >{taskDetail.details}
                            </Typography>
                    </Box>
                    <Box
                        sx = {{ marginTop: 5}}>
                    <Typography
                            variant='h6'
                            >Marca para completar</Typography><Toogle
                            label=''
                            toogled={false}
                            onClick={null}/>
                        <br></br>
                    </Box>
                    {taskDetail.id}
                    <Box
                        sx = {{ marginTop: 2}}>
                        <AddComment taskId={taskDetail.id}/>
                    </Box>
                    <Box
                        sx = {{ marginTop: 2}}>
                        <ListComments taskId={taskDetail.id}/>
                    </Box>
            </Stack>   
        </Box>
    )
}

Detail组件接收taskDetail对象，展示任务信息，并将taskDetail.id传递给AddComment和ListComments组件。

出现问题的子组件 ListComments #

function ListComments(props) {
    const [comments, setComments] = useState([])

    useEffect(() => {
        console.log('DEBUG listcomments: ' + props.taskId)
        TaskService.getTaskCommentsById(props.taskId)
            .then(response => {
                setComments(response.data)
            })
    }, [])

    return (
        <div>
            <h2>Comentarios</h2>
            {comments.map((comment, _) => {    
                return  <Comment key={comment.id} comment={comment}/>
            })}
        </div>
    )
}

问题原因 #

1. 初始状态不匹配：父组件中taskDetail的初始值设为数组[]，但后端实际返回的是对象。首次渲染时taskDetail是数组，taskDetail.id自然为undefined，导致传给ListComments的taskId无效。
2. useEffect依赖缺失：ListComments的useEffect依赖项为空数组，仅在组件首次挂载时执行一次。此时taskId是undefined，请求无效；修改代码触发重渲染时，父组件已获取到有效数据，taskId变为有效值，组件重新挂载后useEffect执行才能拿到正确的id。

解决方案 #

方案1：修正父组件初始状态 #

将taskDetail的初始值改为null，同时优化加载状态判断，确保只有拿到有效数据后才渲染子组件：

const [taskDetail, setTaskDetail] = useState(null)

// ...

if (!taskDetail) return <div>Cargando...</div> // 替换为加载组件或提示文本

方案2：给ListComments的useEffect添加依赖 #

在useEffect的依赖数组中加入props.taskId，并增加参数有效性判断，避免无效请求：

useEffect(() => {
    if (!props.taskId) return
    
    TaskService.getTaskCommentsById(props.taskId)
        .then(response => {
            setComments(response.data)
        })
        .catch(err => console.error('获取评论失败:', err)) // 添加错误处理
}, [props.taskId])

方案3：在Detail组件中添加条件渲染 #

只有当taskDetail.id存在时，才渲染ListComments组件：

{taskDetail.id && <ListComments taskId={taskDetail.id}/>}

额外建议 #

• 给所有异步请求添加错误处理逻辑，避免请求失败无反馈；
• 使用可选链操作符taskDetail?.id避免读取undefined属性报错，例如：taskId={taskDetail?.id}；
• 父组件的加载状态可以替换为更友好的加载动画，提升用户体验。

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