// delete function
delete =(index) => {
const st = this.state.data;
const newSt = st[index]._id;
// fetch delete api
fetch(`http://localhost:4000/users/${newSt}`, {
method: 'DELETE'
}, (err,result) => {
if(err){
console.log(err)
}else{
result.json({'msg': 'ok'})
}
})
st.splice(index,1)
this.setState({data: st})
}
I just created a delete function for my react-express-mongoose app. but the (err,result) isnt working. What did I do wrong? (the delete function works) I am just confused about the {(err,result) => {...} and what should I do inside it.
I believe fetch is a promise so it needs the following syntax
fetch(opts)
.then(result => {
console.log(result);
})
.catch(err => {
console.error(err);
});
Fetch API: Using Fetch
Please make your function like the following structure.
// delete function
delete =(index) => {
const st = this.state.data;
const newSt = st[index]._id;
// fetch delete api
fetch(`http://localhost:4000/users/${newSt}`, {method: 'DELETE'}).then((res) => { console.log(res); })
, (err,result) => {
if(err){
console.log(err)
}else{
result.json({'msg': 'ok'})
}
})
st.splice(index,1)
this.setState({data: st})
}
Related
All code work good, but when I put then to the returned module all code crashes and throws error. Is the problem from that the export is function? If it is not from the function may someone explain why?
This is the module
export default {
search: function(searchTerm, searchLimit, sortBy) {
fetch(
`http://www.reddit.com/search.json?q=${searchTerm}&sort=${sortBy}&limit=${searchLimit}`
)
.then(res => res.json())
.then(data => data.data.children.map(data => data.data))
.catch(err => console.log(err));
}
};
This is actual main JavaScript file
import reddit from "./redditApi";
const searchForm = document.querySelector("#search-form");
const searchInput = document.querySelector("#search-input");
// form eventlistener
searchForm.addEventListener("submit", e => {
e.preventDefault();
// get search term
const searchTerm = searchInput.value;
// get sort
const sortBy = document.querySelector('input[name="sortby"]:checked').value;
// get limit
const searchLimit = document.querySelector("#limit").value;
// check input
if (searchTerm === "") {
// show message
showMessage("Please add a search Term!", "alert-danger");
}
// clear input
searchInput.value = "";
// search reddit
reddit.search(searchTerm, searchLimit, sortBy).then(results => {
console.log(results);
});
});
fetch returns a promise, but search doesn't have any return statement at all.
After you call catch on it, the promise is discarded.
If you want to use it outside the search function then you need to return it.
If you intend to do that
reddit.search(searchTerm, searchLimit, sortBy)
.then(results => {
console.log(results);
})
.catch(error => {
console.log(error);
});
you should wrap fetch inside a Promise.
example:
export default {
search: (searchTerm, searchLimit, sortBy) => {
return new Promise((resolve, reject) => {
fetch(`http://www.reddit.com/search.json?q=${searchTerm}&sort=${sortBy}&limit=${searchLimit}`)
.then(res => res.json())
.then(data => resolve(data.data.children.map(data => data.data)))
.catch(err => reject(err));
});
}
};
I have an issue with sending a request to backend from my componentDidMount(). Basically I need to do two things before rendering screen:
Obtain data from API call and save it to state
Send that obtained data to backend and take response values from backend.
The problem I've faced on first step is that setState() is async, and even though my array is not empty (I see it's elements in render() and componentDidUpdate fucntion) in componentDidMount() when I console.log() array it will be empty. Now, the issue is: I still need to send that state array to backend before showing the screen. But how can I do it, when it appears empty there?
I have everything working fine if I send the request from the Button element in my render function, but that's not exactly what I need. Any suggestions?
this.state = {
ActivityItem: [],
}
componentDidMount() {
this.getDataFromKit(INTERVAL); //get data from library that does API calls
this.sendDataToServer(); //sending to backend
}
componentDidUpdate() {
console.log("componentDidUpdate ", this.state.ActivityItem) // here array is not empty
}
getDataFromKit(dateFrom) {
new Promise((resolve) => {
AppleKit.getSamples(dateFrom, (err, results) => {
if (err) {
return resolve([]);
}
const newData = results.map(item => {
return { ...item, name: "ItemAmount" };
});
this.setState({ ActivityItem: [...this.state.ActivityItem, ...newData] })
})
});
And last one:
sendDataToServer() {
UserService.sendActivityData(this.state.ActivityItem).then(response => {
}).catch(error => {
console.log(error.response);
})
And here it works as expected:
<Button
title='send data!'
onPress={() => this.sendDataToServer()
} />
UPDATE
If I have like this (wrapped inside initKit function this will return undefined.
AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
if (err) {
return;
}
return new Promise((resolve) => {
AppleKit.getSamples(dateFrom, (err, results) => {
if (err) return resolve([]);//rest is the same
you have to wait for the promise to resolve. You need something like this:
componentDidMount() {
this.getDataFromKit(INTERVAL).then(result => {
this.sendDataToServer(result); //sending to backend
}).catch(e => console.error);
}
and you can update your other function that fetches data to return it:
getDataFromKit(dateFrom) {
return new Promise((resolve) => {
AppleKit.getSamples(dateFrom, (err, results) => {
if (err) return resolve([]);
const newData = results.map(item => {
return { ...item, name: "ItemAmount" };
});
const allData = [ ...this.state.ActivityItem, ...newData ];
this.setState({ ActivityItem: allData });
resolve(allData);
});
});
}
finally, you need the 'sendData' function to not depend on state, but get a param passed to it instead:
sendDataToServer(data) {
UserService.sendActivityData(data).then(response => {
// ... do response stuff
}).catch(error => {
console.log(error.response);
});
}
Handling Multiple Requests
if the requests don't depend on each other:
componentDidMount() {
Promise.all([
promise1,
promise2,
promise3,
]).then(([ response1, response2, response3 ]) => {
// do stuff with your data
}).catch(e => console.error);
}
if the requests do depend on each other:
componentDidMount() {
let response1;
let response2;
let response3;
promise1().then(r => {
response1 = r;
return promise2(response1);
}).then(r => {
response2 = r;
return promise3(response2);
}).then(r => {
response3 = r;
// do stuff with response1, response2, and response3
}).catch(e => console.error);
}
as far as your update, it seems like you wrapped your async request in another async request. I'd just chain it instead of wrapping it:
make the initKit a function that returns a promise
function initKit() {
return new Promise((resolve, reject) => {
AppleKit.initKit(
KitPermissions.uploadBasicKitData(),
(err, results) => {
if (err) reject({ error: 'InitKit failed' });
else resolve({ data: results });
}
);
});
}
make get samples a separate function that returns a promise
function getSamples() {
return new Promise((resolve) => {
AppleKit.getSamples(dateFrom, (err, results) => {
if (err) resolve([]); //rest is the same
else resolve({ data: results });
});
});
}
chain 2 promises back to back: if initKit fails, it will go in the .catch block and getSamples wont run
componentDidMount() {
initKit().then(kit => {
return getSamples();
}).then(samples => {
// do stuff with samples
}).catch(e => console.log);
}
I have a function for looking item exists or not.
addNewPerson(name) {
AsyncStorage.getItem('savedPersons', (err, result) => {
const name = [name];
if (result !== null) {
var newIds = JSON.parse(result).concat(name);
AsyncStorage.setItem('savedPersons', JSON.stringify(newIds));
console.log('Data Found', result);
} else {
AsyncStorage.setItem('savedPersons', JSON.stringify(name));
console.log('Data Added', name);
}
});
}
Now I want to delete some specific person in "savedPersons".
I Tried this code:
AsyncStorage.removeItem('savedPersons','Uzuner');
error text is : "callback is not a function."
How can I delete item in asycnStorage's array?
Solved:
I write this code for deleting item.
removePost = async (post_id) => {
try {
const posts = await AsyncStorage.getItem('savedPersons');
let postsFav = JSON.parse(posts);
const postsItems = postsFav.filter(function(e){ return e !== post_id });
// updating 'posts' with the updated 'postsItems'
await AsyncStorage.setItem('savedPersons', JSON.stringify(postsItems));
} catch(error) {
console.log('error: ', error);
}};
Thanks alot all users for replies.
AsyncStorage.removeItem is an asynchronous task which returns a promise or callback. Also, if you want to remove an element from the array then you need to get the array first,delete the element and push it back to the local storage. Something like this,
AsyncStorage.getItem("savedPersons")
.then(persons =>{
const index = persons.indexOf("Uzuner");
const modifiedPersons = persons.splice(index,1);
AsyncStorage.setItem("savedPersons",modifiedPersons)
.then(() => console.log(done))
.catch((error) => console.log("error"));
})
.catch(error => console.log("Error while retrieving the savePersons"));
i have a problem:
I want that my axios make the requistion and after it makes the this.setState with the result saved in a variable.
My code:
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
async axios.get(`/api/status/${i.mail}`)
.then(res => {
mails.push(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
But it gives error syntax.
Best explanation: I want saved all results of the map in the variable mails and later to use the setState to changes the result of just a time.
Someone could tell me where i'm wandering? Please.
You are using async await at the wrong places. async keyword must be used for a function that contains asynchronous function
await keyword needs to be used for an expression that returns a Promise, and although setState is async, it doesn't return a Promise and hence await won't work with it
Your solution will look like
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, async () => {
const mails = await Promise.all(this.state.employees.map(async (i) => { // map function contains async code
try {
const res = await axios.get(`/api/status/${i.mail}`)
return res.data;
} catch(err) {
console.log(err)
}
})
this.setState({ mails })
}))
.catch(err => console.log(err))
}
It's not a good practice to mix async/await with .then/.catch. Instead use one or the other. Here's an example of how you could do it using ONLY async/await and ONLY one this.setState() (reference to Promise.each function):
componentDidMount = async () => {
try {
const { data: employees } = await axios.get('/api/employee/fulano'); // get employees data from API and set res.data to "employees" (es6 destructing + alias)
const mails = []; // initialize variable mails as an empty array
await Promise.each(employees, async ({ mail }) => { // Promise.each is an asynchronous Promise loop function offered by a third party package called "bluebird"
try {
const { data } = await axios.get(`/api/status/${mail}`) // fetch mail status data
mails.push(data); // push found data into mails array, then loop back until all mail has been iterated over
} catch (err) { console.error(err); }
})
// optional: add a check to see if mails are present and not empty, otherwise throw an error.
this.setState({ employees, mails }); // set employees and mails to state
} catch (err) { console.error(err); }
}
This should work:
componentDidMount() {
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
axios.get(`/api/status/${i.mail}`)
.then( async (res) => { // Fix occurred here
let mails = [].concat(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
You put async in the wrong place
async should be placed in a function definition, not a function call
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
axios.get(`/api/status/${i.mail}`)
.then(async (res) => {
mails.push(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
I have two tables in mysql and want to query a table depending on the result of another, so I wrote a function like
export function getLocations(req, res) {
const database = new Database();
database.query('select * from districts')
.then(rows => {
let appData = [];
rows.forEach(row => {
const new_database = new Database();
new_database.query(`SELECT locations.id,locations.name, IF(subscriptions.id IS NULL,0,1) as subscribed
FROM locations
LEFT JOIN subscriptions
ON (subscriptions.location_id = locations.id AND subscriptions.user_id=1)
WHERE locations.district=?`,row.id)
.then(sub_rows => {
let district=row;
district["locations"]=sub_rows;
appData.push(district);
new_database.close();
}, err => {
return new_database.close().then(() => { throw err; })
})
.catch(err => {
console.log(err);
res.status(500).json("Database Error");
})
});
res.status(200).json(appData); //final result here
database.close()
}, err => {
return database.close().then(() => { throw err; })
})
.catch(err => {
console.log(err);
res.status(500).json("Database Error");
})
}
Here I want to get run second query based for each of the row of first query.
I am getting an empty array as result. My first query is executing properly and I logged to see all rows are being returned. What could be the issue?
You can make it work by making this async
rows.forEach(async row => {
const new_database = new Database();
await new_database.query(`SELECT locations.id,locations.name, IF(subscriptions.id IS NULL,0,1) as subscribed
FROM locations
LEFT JOIN subscriptions
ON (subscriptions.location_id = locations.id AND subscriptions.user_id=1)
WHERE locations.district=?`,row.id)
.then(sub_rows => {
let district=row;
district["locations"]=sub_rows;
appData.push(district);
new_database.close();
}, err => {
return new_database.close().then(() => { throw err; })
})
.catch(err => {
console.log(err);
res.status(500).json("Database Error");
})
});
The operation you are performing is I/O and JS is single threaded. It means in layman terms it will not wait will iterating your loop where it is going to be making a request where there is some wait while the request processes. You need to tell JS that this event is asynchronous. For this you need to use async/await
Guides
forEach async/await
async/await MDN documentation
I don't have the environment in this machine. it may have some errors but you can fix it if it have, take a look at the following logic
export function getLocations(req, res) {
const database = new Database();
const promises=[];
database.query('select * from districts')
.then(rows => {
let appData = [];
rows.forEach(row => {
promises.push(getAnotherQuery(row));
});
database.close()
}, err => {
return database.close().then(() => { throw err; })
})
.catch(err => {
console.log(err);
res.status(500).json("Database Error");
})
return Promise.all(promises).then(result)=> res.status(200).json(result); //final result here
}
getAnotherQuery=(row)=>{
return new Promise((resolve,reject)=>{
const new_database = new Database();
const appData=[]
new_database.query(`SELECT locations.id,locations.name, IF(subscriptions.id IS NULL,0,1) as subscribed
FROM locations
LEFT JOIN subscriptions
ON (subscriptions.location_id = locations.id AND subscriptions.user_id=1)
WHERE locations.district=?`,row.id)
.then(sub_rows => {
let district=row;
district["locations"]=sub_rows;
appData.push(district);
new_database.close();
resolve(appData);
}, err => {
return new_database.close().then(() => { throw err; })
})
.catch(err => {
console.log(err);
res.status(500).json("Database Error");
})
});
}