Reactjs 使用axios和react从服务器获取数据_Reactjs_Axios

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

reactjs

Reactjs 使用axios和react从服务器获取数据,reactjs,axios,Reactjs,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(re

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={movies:[]}
}
componentDidMount（）{
axios.get（）https://facebook.github.io/react-native/movies.json')
.then（response=>this.setState（{movies:response.data.data}））
}
渲染器（）{
const{movies}=this.state
返回movies.map（用户=>(
{title}{releaseYear}
))
}
render（）{
返回{this.renderUsers（）}
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)

和我的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>

问题是，我的页面上什么都没有。有什么问题吗？

我已经解决了几个问题

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={movies:[]}
}
componentDidMount（）{
axios.get（）https://facebook.github.io/react-native/movies.json')
.then（response=>this.setState（{movies:response.data.movies}））
}
渲染器（）{
const{movies}=this.state
返回movies.map（数据=>(
{data.title}{data.releaseYear}
))
}
render（）{
返回{this.renderUsers（）}
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)

我解决了几个问题

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={movies:[]}
}
componentDidMount（）{
axios.get（）https://facebook.github.io/react-native/movies.json')
.then（response=>this.setState（{movies:response.data.movies}））
}
渲染器（）{
const{movies}=this.state
返回movies.map（数据=>(
{data.title}{data.releaseYear}
))
}
render（）{
返回{this.renderUsers（）}
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
)

您是否使用webpack/babel对其进行了打包，或者是否正在尝试按图所示运行它？如果是后者，那么我相信您需要包括巴贝尔，否则您的JSX将无效。包括：

在您的头部部分。如果不是这样，请使用浏览器的开发人员控制台并共享您看到的任何错误消息。似乎响应数据将是

response.data.movies

，而不是

response.data.data

。我看到的另一个问题是，在

renderUsers

中，它应该是

{user.title}{user.releaseYear}

。您可能想使用

movie

而不是

user

。您是用webpack/babel打包的，还是正在按图所示运行它？如果是后者，那么我相信您需要包括巴贝尔，否则您的JSX将无效。包括：

在您的头部部分。如果不是这样，请使用浏览器的开发人员控制台并共享您看到的任何错误消息。似乎响应数据将是

response.data.movies

，而不是

response.data.data

。我看到的另一个问题是，在

renderUsers

中，它应该是

{user.title}{user.releaseYear}

。您可能想使用

movie

而不是

user

。非常感谢！在localhost中，它不起作用，但我认为它可能是某种浏览器保护。你知道如何让它在本地主机上工作吗？你在浏览器控制台中有错误吗？使用脚本标记包含movies.js组件的方式不正确。您需要遵循@jarmod的评论，然后发布您得到的任何错误。哦，对不起，它起作用了。babel.min.js不在头部区域。。。谢谢非常感谢你！在localhost中，它不起作用，但我认为它可能是某种浏览器保护。你知道如何让它在本地主机上工作吗？你在浏览器控制台中有错误吗？使用脚本标记包含movies.js组件的方式不正确。您需要遵循@jarmod的评论，然后发布您得到的任何错误。哦，对不起，它起作用了。babel.min.js不在头部区域。。。谢谢