Making REST calls from a react component
Solution 1
There are a couple of errors in your code. The one that's probably tripping you up is the this.setState({items:result.json()})
Fetch's .json()
method returns a promise, so it will need to be dealt with as async.
fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState({items}))
I don't know why .json()
returns a promise (if anyone can shed light, I'm interested).
For the render function, here you go...
<ul>
{this.state.items.map(item=><li key={item.id}>{item.body}</li>)}
</ul>
Don't forget the unique key!
For the other answer, there's no need to bind map.
Here it is working...
http://jsfiddle.net/weqm8q5w/6/
Solution 2
You can try this for your render method:
render() {
var resultNodes = this.state.items.map(function(result, index) {
return (
<div>result<div/>
);
}.bind(this));
return (
<div>
{resultNodes}
</div>
);
}
and don't forget to use .bind(this)
for your fetch(...).then()
, I don't think it could work without...
Solution 3
Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:
In your case:
componentDidMount(){
fetch('http://api/call') // returns a promise object
.then( result => result.json()) // still returns a promise object, U need to chain it again
.then( items => this.setState({items}));
}
result.json() returns a promise, because this it works on a response stream and we need to process entire response first in order to work.
user_mda
Updated on April 23, 2020Comments
-
user_mda about 4 years
I am trying to make REST call from a react component and render the returned JSON data into the DOM
Here is my component
import React from 'react'; export default class ItemLister extends React.Component { constructor() { super(); this.state = { items: [] }; } componentDidMount() { fetch(`http://api/call`) .then(result=> { this.setState({items:result.json()}); }); } render() { return( WHAT SHOULD THIS RETURN? ); }
In order to bind the returned json in a DOM?