Question

我有路线：

<Router history={browserHistory}>
  <Route path="/" component={Root}>
    <Route path="/shop" component={Shop}>
      <Route path="/items" component={AllItems}></Route>
      <Route path="/collections" component={Collections}></Route>
    </Route>
  </Route>
</Router>

我的父组件商店：

export default class Shop extends Component {
  constructor(props) {
    super(props)
    this.state=({
      user: cookie.load('user'),
    })
    this.httpHandler = axios.create({
      baseURL: 'localhost:3000',
      headers: {
        'Authorization': this.state.user.token
      }
    })
  }

  componentWillUpdate () {
    this.httpHandler('/products/')
    .then(function (response) {
      console.log('sdfsdf')
      this.setState({ data: response.data}) 
    }.bind(this))
  }

  render() {
    var childrenWithProps = React.cloneElement(this.props.children, this.state);

    return (
      <div>
        <ShopNav />
        {childrenWithProps}
      </div>
    )
  }
}

子组件：

export default class AllItems extends Component {
  constructor (props) {
    super(props)
    console.log(this.props)
   }
  render() {
   return(
                <Child products={this.state.winks} />
      )      
  }
}

我正在尝试使用此api调用，然后将数据作为道具传递给我的子组件。但是，我不确定要使用什么生命周期事件，我已经尝试过componentWillMount和componentWillUpdate但它最终甚至没有运行api调用。我能够传递prop this.state.user，但只是想要一种传递数据的方法。我应该接近另一种方式吗？

Answer 1

你试过componentWillReceiveProps(nextProps)吗？在其中你可以检查nextProps对象是否与你的状态相同并更新你的状态。

我希望你正在寻找

反应路由器中的父组件使用哪种生命周期方法？

1 个答案: