I'm trying to do a simple fetch through the componentDidMount lifecycle method. However, the result does not appear on the page as it should unless I have a one second timeout. I've gathered it's due to the async nature of the fetch, but how can I fix that without having to use setTimeout? Would componentDidUpdate work/how would you use it?
constructor(props) {
super(props);
this.state = { value: '' };
this.getValue= this.getValue.bind(this);
}
getValue() {
return (
fetch(url, {
method: 'GET',
}).then(response => {
if (response.status >= 400) {
throw new Error('no response: throw');
}
return response.json()
}).then(response => {
this.setState({value: response});
}).catch((error) => {
this.setState({
value: 'no response: catch'
})
})
);
}
componentDidMount(){
//this.getValue(); //does not work
setTimeout(() => this.getValue(), 1000); //this works & populates page
}
render() {
return (
<div>
<div>{this.state.value}</div>
</div>
)
}
Be sure you are binding your this.getValue method to the proper context in the constructor. When you put it in your setTimeout, you have it in a fat arrow function which binds to this implicitly.
constructor(props) {
super(props);
this.getValue = this.getValue.bind(this);
}
getValue() { ... }
componentDidMount() {
this.getValue();
}
Related
I have Posts component:
class ProfilePosts extends React.Component {
constructor(props){
super(props);
this.state = {
posts: []
}
}
getData = async (url) => {
const res = await fetch(url, {
method: 'GET',
headers: {
'Authorization' : `${window.localStorage.getItem('token')}`
}
});
return await res.json();
}
getPosts = async () => {
if (window.location.pathname === '/profile/undefined%7D')
{
window.location.pathname = `/profile/${window.localStorage.getItem('id')}`
}
await this.getData(`https://api.com/posts/${window.location.pathname.slice(9)}`)
.then(data => {
this.setState({posts: data}
);
})
}
componentDidMount(){
if (window.localStorage.getItem('id') != ''){
this.getPosts();
}
}
componentDidUpdate(){
if (window.localStorage.getItem('id') != ''){
this.getPosts();
}
}
renderItems(posts){
return Object.values(posts).map(post => {
return (
<ProfilePost likes={post.likes} comments={post.comments} userId={window.localStorage.getItem('id')} token={window.localStorage.getItem('token')} Postid={post.id} key={post.id} sender={post.sender} content={post.content} time={post.sent_time}/>
)
});
}
render() {
const {posts} = this.state;
const items = this.renderItems(posts);
return(
<div className="profile-posts">
{items}
</div>
);}
}
export default ProfilePosts;
I don't understand what is the reasons for re-rendering this component so many times (I don't know the actual number but it's huge). Therefore, a lot of requests to the database, and so on. How can I fix this?
I tried using another state but that didn't work for me. If you press the button, the state changed and then I checked if the state changed then I call this.getPosts() and then set the state to false again. It caused Error: Maximum update depth exceeded.
Your componentDidUpdate runs every time the component updates, after render, so it's calling this.getPosts();, which in turn calls setState, which results in another re-render and update, and so on.
Remove the componentDidUpdate entirely and let the componentDidMount method (which implements the same logic) alone take care of things.
I am learning about how to use synchronous setState but it is not working for my project. I want to update the state after I get the listingInfo from Axios but it does not work, the res.data, however, is working fine
class ListingItem extends Component {
constructor(props) {
super(props);
this.state = {
listingInfo: {},
open: false,
};
this.getListingData(this.props.itemId);
}
setStateSynchronous(stateUpdate) {
return new Promise((resolve) => {
this.setState(stateUpdate, () => resolve());
});
}
getListingData = async (item_id) => {
try {
const res = await axios.get(`http://localhost:5000/api/items/${item_id}`);
console.log(res.data);//it's working
await this.setStateSynchronous({ listingInfo: res.data });
// this.setState({
// listingInfo: res.data,
// });
console.log(this.state.listingInfo);//no result
} catch (err) {
setAlert('Fail to obtain listings', 'error');
}
};
I would be really grateful for your help!
Thanks to #PrathapReddy! I used conditional rendering to prevent the data from rendering before the setState is done. I added this line of code on the rendering part:
render() {
if (Object.keys(this.state.listingInfo).length === 0) {
return (
<div>
Loading
</div>
);
} else {
return //put what you want to initially render here
}
}
Also, there is no need to modify the setState, the normal setState will do. Hope this is useful!
I've seen a lot of questions and I couldn't get the solution
here is my code:
import React, { Component } from "react";
import axios from "axios";
import "./tree.css";
import "./mainTree";
class TablesTree extends Component {
constructor(props) {
super(props);
this.data = this.props.info;
this.state = {
fields: [],
data: [],
show: false
};
}
componentDidMount() {
var dataGet = [];
this.props.tables.forEach((name, i) => {
this.getFieldsTable(name.TABLE_NAME, (err, res) => {
if (res) {
dataGet.push({
TABLE_NAME: name.TABLE_NAME,
columns: res
});
}
});
});
this.setState({ data: dataGet });
}
getFieldsTable(table, callback) {
axios
.get(`table/columns?name=${this.data.user}&psw=${this.data.password}&schema=${this.data.schema}&table=${table}`)
.then(response => {
callback(null, response.data);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
{this.state.data
? this.state.data.map((itm, i) => {
return (
<div>
<h1>{itm.TABLE_NAME}</h1>
</div>
);
})
: null}
</div>
);
}
}
export default TablesTree;
I've made console.log of the this.state.data
and the data is in there, but it doesn't renders anything
I've tried a lot of soutions, but I still without rendering the data, I will apreciate your help.
There's a few things I would change about your code, but most importantly you need to do this.setState after your push to dataGet (inside of your callback function).
Because your API call is asynchronous, you are only calling setState once when your component is initially mounted (and while dataGet is still empty).
getFieldsTable is asynchronous, so the dataGet array will be empty when you call setState.
You could return the promise from getFieldsTable and use Promise.all on all the promises, and use the data when all of them have resolved.
Example
class TablesTree extends Component {
// ...
componentDidMount() {
const promises = this.props.tables.map(name => {
return this.getFieldsTable(name.TABLE_NAME).then(res => {
return {
TABLE_NAME: name.TABLE_NAME,
columns: res
};
});
});
Promise.all(promises).then(data => {
this.setState({ data });
});
}
getFieldsTable(table) {
return axios
.get(`table/columns?name=${this.data.user}&psw=${this.data.password}&schema=${this.data.schema}&table=${table}`)
.then(response => {
return response.data;
})
.catch(error => {
console.log(error);
});
}
// ...
}
I have created a react application where i am fetching an API and getting the response. below are the code,
export class EmpDetails extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.updateEmpName = this.updateEmpName.bind(this);
}
componentWillReceiveProps(nextProps) {
this.handleProp(nextProps);
if(nextProps){
this.GetData(nextProps);
} else {
console.log("Emp number not set");
}
}
GetData(props, EmpCollection) {
this.ApiCall(props);
}
ApiCall(props) {
$.ajax({
url: 'http://localhost:8081/getdata',
type: 'POST',
data: {Empnumber:props.Empnumber},
success: function(data) {
this.setState({EmpCollection: data.EmpCollection});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.Empnumber, status, err.toString());
}.bind(this)
});
}
getInitialState(){
return {
EmpCollection: []
}
}
updateEmpName(e) {
this.setState({EmpName: e.target.value});
}
render() {
return (
<form>
<div >
<input
type="text"
id="EmpName"
placeholder="Emp Name"
value={this.state.EmpName}
onChange={this.updateEmpName} />
</div>
</form>
);
}
}
I am able to get the response and can use it only in render(). and I wanted API response in GetData() or any other method so that i can set the state of there and populate controls. not in render. any idea how can i achieve this?
Well you need to save the response somewhere. I could be just variable outside of component or it could be component property. For example,
class YourComponent extends React.Component {
constructor() {
// your code ...
this.response = null;
}
callApi() {
const self = this;
$.ajax({
// your code ...
success: function(response) {
self.response = response;
}
})
}
someOtherMethod() {
console.log(this.response)
}
}
I would suggest you to make api call in life cycle method componentDidMount not in componentWillReceiveProps as recommended in react docs.
Need to change your api call method a little bit.
ApiCall(props) {
return $.ajax({
url: 'http://localhost:8081/getdata',
type: 'POST',
data: {Empnumber:props.Empnumber}
}).fail((responseData) => {
if (responseData.responseCode) {
console.error(responseData.responseCode);
}
});
}
Basically above call will return you a jquery promise which you can use later.
Now in what ever method you want to make ApiCall just use like this -
GetData(props,EmpCollection)
{
this.ApiCall(props)
.then(
function(data){
console.log(data);
// set the state here
},
function(error){
console.log(error);
}
);
}
I want to show a list of messages when the page is loaded. i call action and addChangeListener to subscribe for changes in componentDidMount, hoping i can get the data back from server from store, though addChangeListener is called, but the callback is not being invoked. It seems like this.on('change', callback) in store is not working as it should. does anyone know what is the issue of my code? Im following the example on flux's repo
Also, where is the proper place to make api calls for backend data in store? is ok if i do it in getter in a store class?
thanks.
components/MessageList.js
class MessageList extends Component {
constructor(props) {
super(props)
this.renderMessage = this.renderMessage.bind(this)
this.state = {
loaded: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
}
}
componentDidMount() {
messageActions.getAll()
messageStore.addChangeListener(this._onChange)
}
_onChange() {
console.log('on change') // <-- not being called from this point
this.setState({
dataSource: this.state.dataSource.cloneWithRows(messageStore.getAll())
})
}
//...
}
stores/MessageStore.js
let _messages = {}
function create(text, latitude, longitude) {
fetch('http://localhost:3000/api/message', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
content: text,
latitude: latitude,
longitude: longitude
})
})
.then(r => r.json())
.then(data => {
this.props.navigator.pop()
})
.done()
}
function getAllMessages(callback) {
fetch('http://localhost:3000/api/message')
.then((res) => res.json())
.then((data) => {
callback(data)
})
.done()
}
class MessageStore extends EventEmitter {
constructor() {
super()
}
emitChange() {
this.emit('change')
}
addChangeListener(callback) {
console.log('here') // <-- works
// this.on('change', callback) // <-- not working
this.on('change', () => console.log('helloooo')) // <-- not working
}
getAll() {
return _messages
}
}
dispatcher.register(action => {
switch(action.actionType) {
case 'MESSAGE_CREAT':
text = action.text.trim();
if (text !== '') {
create(text, action.latitude, action.longitude)
messageStore.emitChange()
}
break
case 'MESSAGE_ALL':
console.log('store..');
getAllMessages(data => _messages = data)
messageStore.emitChange()
}
})
const messageStore = new MessageStore()
export default messageStore
You cannot call the change listener in the store, you are only setting it up there. Try adding:
addChangeListener(callback) {
this.on('change', callback);
}
Instead of:
addChangeListener(callback) {
console.log('here') // <-- works
// this.on('change', callback) // <-- not working
this.on('change', () => console.log('helloooo')) // <-- not working
}
When a change happens, the changeListener in the store will trigger the change listener in MessageList:
messageStore.addChangeListener(this._onChange)
Then the _onChange function will be called.