未通过React-Router路由道具

Question

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.

Answer 1

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?