Передача состояния из App.js в компонент React Router - PullRequest
Новая
       15

Передача состояния из App.js в компонент React Router

0 голосов
/ 13 мая 2019

У меня есть состояние в App.js, которое заполняется данными животных, возвращаемыми API.Эти данные доступны с this.state.animals на загруженном компоненте, но моя проблема заключается в том, что при изменении маршрута на /animals я больше не могу звонить this.state.animals.Как будто у меня больше нет доступа или данные исчезли.Как передать состояние любому компоненту при переходе к ним?

App.js 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import Animals from './components/Animals'

class App extends Component {
  state = {
    animals: []
  }

  componentDidMount() {
    fetch('animals api path here')
    .then(result => result.json())
    .then((data) => {
      this.setState({ animals: data })
    })
    .catch(console.log)
  }

  render() {
    return (
          <Router>
            <NavLink to="/animals">animals</NavLink>
            <Route exact path="/animals" render={()=> <Animals parentState={this.state.animals} />} />
          </Router>
    );
  }
}

export default App

components / Animals.js 

import React, { Component } from 'react'

class Animals extends Component {
  render() {
    console.log(this.state.animals)
    return (
      <h2>Animals</h2>
    //<div>I would loop through and list the animals if I could...</div>
    )
  }
}

export default Animals

Ответы [ 2 ]

1 голос
/ 13 мая 2019

В этом примере, если вы хотите получить доступ к данным о животных, это будет {this.props.parentState} внутри компонента животного

0 голосов
/ 13 мая 2019

Ваша декларация Route определена вне контекста маршрутизатора. При использовании React-Router все ваши компоненты должны иметь среди своих предков a. Обычно это компонент верхнего уровня, отображаемый в (по крайней мере, если вы не используете другие библиотеки, которым нужно определение корневого контекста, например Redux).

...