使用 axios 和 react 从服务器获取数据答案

【问题标题】：get data from server using axios with react使用 axios 和 react 从服务器获取数据
【发布时间】：2019-12-05 19:06:50
【问题描述】：

我是使用 react 的新手，我想从服务器获取数据，所以我尝试了：

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { movies: [] }
  }

  componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json')
      .then(response => this.setState({ movies: response.data.data }))
  }

  renderUsers() {
    const { movies } = this.state

    return movies.map( user => (
      <div key={id}>{title} {releaseYear}</div>
    ))
  }

  render() {
    return <div>{ this.renderUsers() }</div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

还有我的html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>

  <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="movies.js" type = "text/babel"></script>

  </body>
</html>

问题是，我的页面中什么也没有。有什么想法有什么问题吗？

【问题讨论】：

你是用 webpack/babel 打包这个还是你试图运行它？如果是后者，那么我相信您需要包含 babel，否则您的 JSX 将无效。包括：<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 在您的头部。如果不是这样，请使用浏览器的开发者控制台并分享您看到的任何错误消息。
似乎响应数据将是response.data.movies 而不是response.data.data。我看到的另一个问题是，在renderUsers 中应该是<div key={user.id}>{user.title} {user.releaseYear}</div>。您可能也想使用movie 而不是user。

标签： reactjs axios

【解决方案1】：

我已经解决的几个问题

componentDidMount 中的 setState 选择了错误的键。您需要设置 response.data.movies 而不是 response.data.data
在 renderUsers 函数中使用了不正确的 map 函数。您需要从正确的变量中选择 id、title 和 releaseYear，而不是直接使用它们

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { movies: [] }
  }

  componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json')
      .then(response => this.setState({ movies: response.data.movies }))
  }

  renderUsers() {
    const { movies } = this.state

    return movies.map( data => (
      <div key={data.id}>{data.title} {data.releaseYear}</div>
    ))
  }

  render() {
    return <div>{ this.renderUsers() }</div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>

  <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="movies.js" type = "text/babel"></script>

  </body>
</html>

【讨论】：

非常感谢！在 localhost 中它不起作用，但我认为它可能是一些浏览器保护。任何想法如何使它在本地主机中工作？
您是否在浏览器控制台中遇到任何错误？您使用 script 标签包含 movies.js 组件的方式不正确。您需要关注@jarmod 的评论，然后发布您遇到的任何错误
哦，对不起，它奏效了。 babel.min.js 不在 head 部分...谢谢！