Question

我在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

Answer 1

在此示例中，如果要访问动物数据，它将位于动物组件内的{this.props.parentState}

Answer 2

您的Route声明是在路由器上下文之外定义的。使用React-Router时，所有组件的祖先中都应有a。通常，是渲染的顶层组件（至少在不使用其他需要根上下文定义的库（例如Redux）的情况下）。

将状态从App.js传递到React Router组件

2 个答案: