使用带有反应的axios从服务器获取数据

提问者：小点点

使用带有反应的axios从服务器获取数据

我刚使用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>

问题是，我的页面上什么都没有。你知道怎么了吗？

共1个答案

匿名用户

我已经解决了几个问题

setState在组件didMount是挑选错误的键。你需要设置response.data.movies而不是response.data.data
映射函数在renderUser函数中使用不正确。您需要从正确的变量中选择id，title和释放年，而不是直接使用它们

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>

使用带有反应的axios从服务器获取数据

共1个答案

相关问题

热门标签

使用带有反应的axios从服务器获取数据

共1个答案

相关问题

热门标签

微信关注