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

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

组件/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}