Блог

У меня есть маршруты :

 <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 , но просто хотел способ передачи данных. Должен ли я подходить к этому по-другому?

Вы пробовали componentWillReceiveProps(nextProps) ? Внутри него вы можете проверить, совпадает ли объект nextProps с вашим состоянием, и обновить ваше состояние.

Я надеюсь, что это то, что вы ищете