Reactjs 如何在子组件中获得更新的道具？

晚上好,

我已经和一个不正确的道具状态斗争了几个小时。我想我没有在React的循环更新中捕捉到一些东西

让我们来解释一下：我有一个名为Post的父组件，它使用axios从firebase获取Post的数据。通过使用props transfer to child component，我获得了作者的Id、文章的点数以及我想要转移到名为likeHandler的子组件的作者点数

在子组件中，我使用这些数据再次使用axios更新firebase。目标是，当用户点击喜欢/不喜欢图标时，它会给用户1分或删除1分，这与帖子本身是一样的

问题是，当我进入页面时，我的console.log对auteurId和NbPoints显示undefined或null，因此我无法单击like按钮进行更新，因为props的值为null。 我需要刷新或强制渲染以获得正确的值

我在互联网上寻找这个问题，我想不出一个合适的方法

我试过使用useeffect，但因为以前安装过道具，所以更糟。。。我不知道使用redux是否有帮助

请在下面查找相关代码

父组件，获取发布信息功能：

const getComments = () => { // Permet d'avoir toutes les infos du post (y compris les points)
        console.log("fet comment")
        axios.get('/posts/'+props.idPost+'.json')
            .then(response => {
                if(response.data.comments && response.data.comments !== null) {
                    setNbComments(Object.keys(response.data.comments).length)
                }
                let fetchedCommentsCopy = []
                for(let key in response.data.comments) {
                    fetchedCommentsCopy.push(response.data.comments[key])
                }
                fetchedCommentsCopy = fetchedCommentsCopy.reverse()
                setFetchedComments(fetchedCommentsCopy)
                    setNbPoints(response.data.points)
                    setPostUsersLiked(response.data.usersLiked)
                    setPostUsersDisliked(response.data.usersDisliked)
                    setAuteur(response.data.auteur)
                    setAuteurId(response.data.auteurId)
            })
    } 

父组件，将道具传递给子组件：

<div>
                        <LikesHandler 
                        idPost={props.idPost} 
                        nbPoints={nbPoints} 
                        postUsersLiked={postUsersLiked} 
                        postUsersDisliked={postUsersDisliked}
                        pointsTouched={(methode) => pointsHandler(methode)}
                        auteur={auteur}
                        auteurId={auteurId}
                        ></LikesHandler>
                        <img src={speechBubble} alt="Commentaires" className={classes.imgButton} onClick={switchComments}/>
                    </div>

pointsHandler（methode）}
AUTUR={AUTUR}
AUTURID={AUTURID}
>

Childcomponent（如Handler），用于更新axios和状态的函数：

const handleLike = () => {
        if(props.postUsersLiked.includes(props.userPseudo))
        {
            let newLikesArray = props.postUsersLiked;
            newLikesArray.splice(newLikesArray.findIndex(element => element === props.userPseudo), 1)
            let objectToSend = {
                usersLiked: newLikesArray,
                points: props.nbPoints - 1
            }
            axios.patch('/posts/'+props.idPost+'.json', objectToSend)
            .then (() => {
                setFeedback(<Alert type="danger">Tu viens d'annuler ton like</Alert>)
                setTimeout(() => {
                setFeedback(null)
                }, 2000);
                let newNbPoints = {
                    points: userPoints - 1
                }
                console.log("points before using axios", userPoints)
                axios.patch('/users/'+props.auteurId+'.json', newNbPoints)
                    .then(() => {
                        console.log("va voir maggle")
                    })
                setUserPoints(prev => prev - 1)
            })
        } else if (props.postUsersDisliked.includes(props.userPseudo)) {
            setFeedback(<Alert type="danger">Tu ne peux pas disliker et liker ce post, il faut choisir !</Alert>)
            setTimeout(() => {
                setFeedback(null)
            }, 2000);
        } else {
            let likesArray = props.postUsersLiked;
            likesArray.push(props.userPseudo)
            let objectToSend = {
                usersLiked: likesArray,
                points: props.nbPoints + 1
            }
            console.log("points avant le drame", userPoints)
           axios.patch('/posts/'+props.idPost+'.json', objectToSend)
                .then(() => {
                    setFeedback(<Alert type="success">Post liké !</Alert>)
                    props.pointsTouched("add")
                    setTimeout(() => {
                        setFeedback(null)
                    }, 2000);
                    let newNbPoints = {
                        points: userPoints + 1
                    }
                    axios.patch('/users/'+props.auteurId+'.json', newNbPoints)
                        .then(() => {
                            console.log("va voir maggle")
                        })
                    setUserPoints(prev => prev + 1)
                })
        }
    }

consthandlelike=（）=>{
if（props.positionrsliked.includes（props.userPseudo））
{
让newLikesArray=props.postasersliked；
拼接（newLikesArray.findIndex（element=>element==props.userPseudo），1）
让objectToSend={
usersLiked:newLikesArray，
点数：props.nbPoints-1
}
patch（'/posts/'+props.idPost+'.json'，objectToSend）
.然后（（）=>{
setFeedback（Tu viens d'Canoler吨级）
设置超时（（）=>{
设置反馈（空）
}, 2000);
设newNbPoints={
点数：userPoints-1
}
log（“使用axios之前的点”，userPoints）
修补程序（'/users/'+props.auteurId+'.json'，newNbPoints）
.然后（（）=>{
控制台日志（“va voir maggle”）
})
设置用户点（prev=>prev-1）
})
}else if（props.positionrsdisliked.includes（props.userPseudo））{
setFeedback（你不喜欢和喜欢ce post，我错了！）
设置超时（（）=>{
设置反馈（空）
}, 2000);
}否则{
让likesArray=props.postasersliked；
likesArray.push（props.userPseudo）
让objectToSend={
usersLiked:就像Array一样，
点数：道具点数+1
}
log（“points avant le drame”，userPoints）
patch（'/posts/'+props.idPost+'.json'，objectToSend）
.然后（（）=>{
设置反馈（Post liké！）
道具点触摸（“添加”）
设置超时（（）=>{
设置反馈（空）
}, 2000);
设newNbPoints={
点数：userPoints+1
}
修补程序（'/users/'+props.auteurId+'.json'，newNbPoints）
.然后（（）=>{
控制台日志（“va voir maggle”）
})
设置用户点（prev=>prev+1）
})
}
}

在第一个渲染周期中使用axios之前，所有控制台日志都显示未定义或null

也许你们有更好的方法

还有一个一般性问题：使用后端数据的最佳方式是什么？获取父组件中的数据并将其传输给子组件，或者直接在需要的地方获取数据

我希望我的问题是明确的，你可以问我，如果你需要更多的信息

晚上好