javascript - React 中的 Axios 多个请求

标签 javascript reactjs

我正在尝试创建 2 个请求并使用 this.setState({}) 设置变量以进行进一步更改。

这是我得到的:

class App extends React.Component {
  constructor() {
    super();
    this.state = {user: false, repository :false}
  }

  componentDidMount() {
    axios.all([
    axios.get('https://api.github.com/users/antranilan'),
    axios.get('https://api.github.com/users/antranilan/repos')
    ])
    .then(axios.spread(function (userResponse, reposResponse) {
            this.setState({user : userResponse.data, repository : reposResponse.data});
        });
  }
 
  render() {
    return (
     <div> 
      {this.state.user.login}
      {this.state.repository.length}
     </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

我通过多个问题查找了我正在尝试做的事情,但没有解决我正在尝试实现的问题。

最佳答案

您的代码中存在绑定(bind)问题。

class App extends React.Component {
  constructor() {
    super();
    // You should use object to delineate the type
    this.state = {user: {}, repository :{} }
  }

  componentDidMount() {
    // Better use native Promise.all
    Promise.all([
      axios.get('https://api.github.com/users/antranilan'),
      axios.get('https://api.github.com/users/antranilan/repos')
    ])
    // use arrow function to avoid loosing context
    // BTW you don't need to use axios.spread with ES2015 destructuring
    .then(([userResponse, reposResponse]) => {
            this.setState({user : userResponse.data, repository : reposResponse.data});
        });
  }
 
  render() {
    const { user, repository } = this.state
    return (
     <div> 
      {user && user.login}
      {repository && repository.length}
     </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

更新 正如@JaromandaX 指出的那样,您最好坚持使用原生 Promise.all 和解构。

关于javascript - React 中的 Axios 多个请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45795179/

相关文章:

javascript - 简单的 JavaScript 帮助

javascript - 如何在 Angular 表中下载 xml 数据

reactjs - 自定义钩子(Hook)重置为其初始状态

javascript - 使用 ReactJS 从模拟 api 获取 json 时定位一个对象

reactjs - ReactCSSTransitionGroup 与 React 0.14 和漂亮的不变违规 : addComponentAsRefTo(. ..)

javascript - 当域不同时,Javascript 如何跨框架访问位置/所选文本?

javascript - XPage 可以有多种渲染条件吗

javascript - 无法使用querySelector获取访问元素?

javascript - React.js onMouseOver 中的两个函数

javascript - 再次挂载时 this.dataTable.getNumberOfRows 不是函数错误 react 谷歌图表