Javascript 即使类已安装，react 子类也会接收未定义的props

我正在try 将一个对象作为‘props ’从父类发送到子类，目的是显示信息:

Parent class个

const TaskDetail = () => {

    //Get parameter from URL
    const { id } = useParams()

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


    useEffect(() => {
        TaskService.getTaskById(id)
            .then(response => {
                setTaskDetail(response.data);
            })

    }, [id]) //This [id] avoid infinite loop of requests
    
    if (!taskDetail) return <div>No data</div>

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

此类向服务器发出请求并收集数据对象.然后，该对象被传递到Child Detail，在那里它将被反序列化并相应地可视化.

Child class个

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>
    )
}

正如您所观察到的，该对象还被传递给其他子组件.上下文是TaskDetail显示信息，然后提供两个特性ListComments和AddComments.目前，我在AddComment中遇到了一个问题，props taskId={taskDetail.id}未定义.

Function in Child where I am having this issue个

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>
)


}

我注意到，如果我更改代码中的某些内容并保存它(重新呈现页面).突然间，我得到了我需要的属性，而不是未定义的值.

How could I avoid this situation?个 我相信我犯了一个我看不见的巨大错误，但这是学习的一部分.出于这个原因，我对建议持开放态度.