admin管理员组文章数量:1327683
I am trying to create 2 requests and set variables with this.setState({})
for further changes.
This is what i got:
class App extends React.Component {
constructor() {
super();
this.state = {user: false, repository :false}
}
ponentDidMount() {
axios.all([
axios.get(''),
axios.get('')
])
.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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="app"></div>
I am trying to create 2 requests and set variables with this.setState({})
for further changes.
This is what i got:
class App extends React.Component {
constructor() {
super();
this.state = {user: false, repository :false}
}
ponentDidMount() {
axios.all([
axios.get('https://api.github./users/antranilan'),
axios.get('https://api.github./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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
I looked up through multiple questions with what i am trying to do but there was no solution to what i am trying to achive.
Share Improve this question asked Aug 21, 2017 at 10:48 MacMac 3273 gold badges8 silver badges19 bronze badges 8-
.then(axios.spread
that looks wrong, because.then
traditionally expects a function as an argument, not the result of calling a function – Jaromanda X Commented Aug 21, 2017 at 10:50 - How should it look like? – Mac Commented Aug 21, 2017 at 10:51
- 1 looks like axios.all and axios.spread won't be around too long anyway, github./mzabriskie/axios/issues/1042 – Jaromanda X Commented Aug 21, 2017 at 10:52
- @JaromandaX I believe the problem is with loosing context inside callback. – Yury Tarabanko Commented Aug 21, 2017 at 10:54
-
1
@Mac "axios is being a problem" actully axios does its job (promisifying network operations) The idea is that
axios.all
andaxios.spread
helpers might be removed in future versions because there is native analog supported by major envs. – Yury Tarabanko Commented Aug 21, 2017 at 11:02
1 Answer
Reset to default 7You have binding issue in your code.
class App extends React.Component {
constructor() {
super();
// You should use object to delineate the type
this.state = {user: {}, repository :{} }
}
ponentDidMount() {
// Better use native Promise.all
Promise.all([
axios.get('https://api.github./users/antranilan'),
axios.get('https://api.github./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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
UPDATE as @JaromandaX pointed out you'd better stick with native Promise.all
and destructuring.
本文标签: javascriptAxios multiple Requests in ReactStack Overflow
版权声明:本文标题:javascript - Axios multiple Requests in React - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742218526a2435013.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论