无法在react js的props中获取数据

Question

下面是我从firebase检索数据并在引导转盘中查看数据的代码。我可以在控制台中看到这些值，但是我不能在另一个组件的道具中获取它。

class JobOfferSlider extends Component {
    componentDidMount = () => {
        var ref = fire.database().ref("Employers/Employer1");
         ref.orderByKey().on("child_added", (snapshot) => {
            this.setState({ slidercontents: snapshot.val()})
            console.log(this.state.slidercontents);
            console.log(this.state.slidercontents.Title)
        });
        var empref = fire.database().ref("Employers/");
        empref.orderByKey().on("child_added", (snapshot) => {
            this.setState({ employers: snapshot.key})
           console.log(this.state.employers);
       });

    }
    state ={
        slidercontents : [], employers : []
    }

我在下面的jsx文件中使用了props

class Slidercontent extends Component {
    componentWillUpdate = ()=>{
        console.log(this.props.employers);
    }
    render() {
       return (
            <div className="col-sm text-center border rounded shadow p-3 m-3">
                <div className="row">
                    <div className="col-md-3">
                        <div className="profilepic"></div>
                    </div>
                    <div className="col-md-9">
                        <h6 className="pt-2 float-left">{this.props.employers}</h6>
                    </div>
                </div>
                <h5 className="font-weight-bold pt-3 text-left">{this.props.slidercontents.Description}</h5> 
                <h5 className="font-weight-bold pt-3 text-left ">{this.props.slidercontents.RatePerHour}</h5>
                <div className="row pt-3">
                    <div className="col-md-2">
                        <div><i class="fas fa-map-marker-alt"></i></div>
                    </div>
                    <div className="col-md-5">
                        <p className="float-left">{this.props.slidercontents}</p>
                    </div>
                    <div className="col-md-5">
                        <p className="float-right">5 mins ago</p>
                    </div>
                </div>
            </div>
        );
    }
}

但道具仍然没有定义……有关于如何访问状态值的帮助吗？

Answer 1

将父组件的状态作为道具传递给子组件(在render函数中)：

render() { 
  return <Slidercontent employers={this.state.employers} 
} 

这样，您就可以通过以下方式访问子组件中的employers：

{this.props.employers}