如何将道具（从获取对象）传递给子组件

我有一个获取声明对象的主要组件；除了他的子组件外，它被正确呈现：

<UserLabel id={this.state.claim.id}/>

这将使用传递的道具获取用户名。

我可以在页面中看到 {this.state.claim.status}、{this.state.claim.created_at}、{this.state.claim.creator_id}；但是 {this.state.claim.creator_id} 没有传递给子组件

子组件正确呈现

如果我传递像“1”这样的字符串道具，组件将正确呈现：

<UserLabel id='1'/>

请你帮助我好吗 ？

文件 EditClaim.js

import axios from 'axios'
import React, {Component} from 'react'
import Status from './Status'
import UserLabel from './UserLabel'

class EditClaim extends Component{
    constructor(props){
        super(props)
        this.state = {
            claim: '',
            creator_id:'',
            errors:[]
        }

    }

    componentDidMount () {
        const claimId = this.props.match.params.id
        axios.get(`/api/claims/${claimId}`).then(response => {
            this.setState({
                claim: response.data
            })
        })
    }

    render(){
        return(
            <div className="container py-4">
                <div className="row justity-content-center">
                    <div className="col-md-6">
                        <h1>Réclamation {this.state.claim.id}</h1>
                        <div className="card">
                            <div className="card-header">
                                Suivi <Status status={this.state.claim.status}/> crée le {this.state.claim.created_at} par ({this.state.claim.creator_id})<UserLabel id={this.state.claim.creator_id}/>
                            </div>
                            <div className="card-body">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default EditClaim

文件 UserLabel.js

import React, {Component} from 'react'
import axios from 'axios'

class UserLabel extends Component{
    constructor(props){
        super(props)
        this.state = {
            user: ''
        }
    }

    componentDidMount () {
        const userId = this.props.id
        axios.get(`/api/users/${userId}`).then(response => {
            this.setState({
                user:response.data
            })
            }
        )
    }

    render(){
        return (
            <div>{this.state.user.name}</div>
        )
    }
}

export default UserLabel

文件状态.js

function Status(props){
    if(props === 0){
        return (<button className='btn btn-sm btn-primary'>Nouvelle</button>)
    }else if(props === 1){
        return (<button className='btn btn-sm btn-warning'>En Cours</button>)
    }else{
        return (<button className='btn btn-sm btn-success'>Close</button>)
    }
}

export default Status

控制台输出