I am using componentDidMount to fetch data from firebase and set the components state with fetched data
componentDidMount() {
this.state.firebase.database().ref().on("value", function(snapshot) {
let data = snapshot.val()
// Authors
this.setState({authors: data.Author})
then in render method I have this
{
console.log(this.state.authors)
}
<Route path="/author/:authorId" component={AuthorPage} authors={this.state.authors} />
Inside AuthorPage component I have this
render() {
console.log(this.props.route)
return (....
The console output is
Object {authorId: Object} // This is for this.state.authors
Object {path: "/author/:authorId", authors: undefined, component: function} // this is for this.props.route
As you can see, this.state.authors has a value, but becomes undefined when passed to component as route props. This has never happened to me before, even in the same app with other routes.
For some reason this solves the problem
let authorsArray = data.Author
let aths = this.state.authors
for(var j in authorsArray) {
aths[j] = authorsArray[j]
}
this.setState({authors: aths})
Anybody know why?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.