Question

我是React世界的新手，所以在阅读我的问题时请记住这一点。

在我的代码中，我正在使用axios发出请求，并且在控制台中将其打印出来时效果很好。这是一个片段：

componentDidMount() {
    const { numToDisplay, data } = this.props

    this.serverRequest = axios
      .get('http://blablabla/locks')
      .then(res => {
        // Rerender state
        console.log(res)
        this.setState({
          res,
          dataToDisplay: res.data.slice(0, numToDisplay || 5),
          allAreShowing: res.data.length < numToDisplay
        })
      })
  }

  componentWillUnmount() {
    this.serverRequest.abort()
  }

  viewAllData() {
    this.setState({
      dataToDisplay: this.state.data,
      allAreShowing: true
    })
  }

  render() {
    console.log(this.state.res) // Prints here!

但在我的应用程序中，我想添加路由（我以前从未使用过React路由），所以我可以导航。所以在我的layout.js文件中我得到了这个：

import React, { Component } from 'react'
import MainNavbar from './Navbar'
import AddButton from './AddButton'
import Doors from './Doors'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

export default class Layout extends Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <MainNavbar />
            <AddButton />
            <Doors />
          </Switch>
        </Router>

      </div>
    )
  }
}

我将BrowserRouter导入为Router，我也导入Switch。我使用的是Switch，因为它只会呈现<Router />的第一个孩子，因为它删除了错误：A 'Router' may have only one child element。

我的问题

然而，既然错误已经消失并且我的所有组件都呈现了，那么axios的get请求就不会出现。取。所以我的问题是为什么。它是否与反应路由器有关？

感谢阅读！

Answer 1

事实证明，在我的Layout.js文件中，我需要添加div。

import React, { Component } from 'react'
import MainNavbar from './Navbar'
import AddButton from './AddButton'
import Doors from './Doors'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

export default class Layout extends Component {
  render() {
    return (
      <div> // Forgot this!
        <Router>
          <Switch>
            <MainNavbar />
            <AddButton />
            <Doors />
          </Switch>
        </Router>

      </div>
    )
  }
}

React Router会干扰Axios吗？

我的问题

1 个答案: