Question

我正在使用componentDidMount从firebase获取数据并使用获取的数据设置组件状态

  componentDidMount() {
  this.state.firebase.database().ref().on("value", function(snapshot) {
  let data = snapshot.val()

  // Authors
  this.setState({authors: data.Author})

然后在渲染方法中我有这个

{
    console.log(this.state.authors)
}
<Route path="/author/:authorId" component={AuthorPage} authors={this.state.authors} />

在AuthorPage组件中我有这个

render() {
    console.log(this.props.route)
    return (....

控制台输出

Object {authorId: Object} // This is for this.state.authors
Object {path: "/author/:authorId", authors: undefined, component: function} // this is for this.props.route

正如您所看到的，this.state.authors有一个值，但在作为路径道具传递给组件时变为未定义。这在我之前从未发生过，即使在与其他路线相同的应用程序中也是如此。

Answer 1

出于某种原因，这解决了问题

  let authorsArray = data.Author
  let aths = this.state.authors
  for(var j in authorsArray) {
    aths[j] = authorsArray[j]
  }
  this.setState({authors: aths})

有人知道为什么吗？

React-router路由道具未通过

1 个答案: