I have a project, where I have a create/delete/update.
so in the update component, I have to update the post Title, post Text, and image. so when I update them and press the submit button to save the changes, it works well but it doesn't display the changed image on the UI, till I reload the page, but it does change the image in the file system,
so the URL is like this: http://localhost:3000/Post-Review/307 i want to add a random number for this URL, after the ID
or if there is any other way to solve this problem.
here is the router: <Route path="/Post-Review/:id" exact> <Post /> </Route>
Here is my submitting code:
const submitUpdate = (e) => {
e.preventDefault();
const formData = postToFormData(
postObject,
file,
selectedTags,
deletedTags
);
formData.append("id", actualId);
axios
.put(`${targetServer}/posts/byId/${actualId}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
})
.then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
history.push("/");
}
});
};
thanks
Couldn't you just use a useEffect inside the component and put the random number in the image ref?
src="myimage.jpg?timestamp=123"
the random number could be the timestamp. This way you would be sure that it will always be a unique value.
const timestamp = new Date().getTime()
#Update
Here is the image URL, that is what I am using now.
src={`${targetServer}/posts/image/${postObject.id}`}
if u want to update the UI, you can simply re-fetch the data after the POST request succeeds. React is built for this kind of use.
here is a sample code :
// your post data goes here
const [data, setData] = useState({
...
})
// a method to fetch post data by id
const fetch_data = (post_id) => {
axios
.get(`${targetServer}/posts/byId/${actualId}`, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
}).then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
// if the update done, then call fetch
setData(res.data)
}
});
}
// the actual update function
const submitUpdate = (e) => {
e.preventDefault();
const formData = postToFormData(
postObject,
file,
selectedTags,
deletedTags
);
formData.append("id", actualId);
axios
.put(`${targetServer}/posts/byId/${actualId}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
})
.then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
// if the update done, then call fetch
fetch_data(post_id)
}
});
}
Related
I am creating a react app with full crud functionality. It allows users to create job postings and i wanted to click on a specific job to view more details.
I am having trouble as everytime i try to click a "job" it says that ID is undefined specifically:
show function called with id: undefined
SyntaxError: Unexpected end of JSON input
My app currently displays the list of all jobs and creates.
I already confirmed the following:
Made sure the backend server is running and listening on port 3001.
Verified that the endpoint i am trying to fetch actually exists. Tried on postman
Made sure that my frontend code is using the correct URL to make requests to the backend.
I am using hooks and functions.
DetailsPage.js
import styles from './DetailsPage.module.css';
import React, { useState, useEffect } from 'react';
import jobsService from '../../utils/jobsService';
export default function DetailPage(props) {
const [job, setJob] = useState({});
const [isLoading, setIsLoading] = useState(true);
const { id } = props.match?.params || {};
useEffect(() => {
const fetchData = async () => {
try {
const { data } = await jobsService.show(id);
setJob(data);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
};
fetchData();
}, [id]);
return (
<>
{isLoading ? (
<div>Loading...</div>
) : (
<div className={styles.list}>
<div className={styles.Grid}>
<h3>{job.title}</h3>
<p>{job.description}</p>
</div>
</div>
)}
</>
);
}
jobsService.js
async function getAll(){
const response = await fetch('http://localhost:3001/api/jobs')
const data = await response.json()
return data
}
async function create(item) {
try {
const response = await fetch('http://localhost:3001/api/jobs/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
});
return await response.json();
} catch (error) {
console.error(error);
}
}
async function show(id) {
console.log("show function called with id:", id);
return fetch(`http://localhost:3001/api/jobs/${id}`, {
method: 'GET',
headers: {
'Content-type': 'application/json',
},
})
.then(res => res.json());
}
export default {
getAll,
create,
show,
}
destruct id form empty object ?
instead this
const { id } = props.match?.params || {};
test this
const { id } = props.match?.params || {id: 0};
or use ternary operator in function calling
or
async function show(id = 0) {
console.log("show function called with id:", id);
return fetch(`http://localhost:3001/api/jobs/${id}`, {
method: 'GET',
headers: {
'Content-type': 'application/json',
},
})
.then(res => res.json());
}
I'm trying to update a field on my MongoDB database with Axios PUT method in React JS. I'm also using react form hook.
const onSubmit = async itemData => {
console.log(itemData);
const url = `http://localhost:5000/items/${id}`
const { data } = await axios.put(url, {
productQTY: itemData.productQTY,
headers: {
authorization: `Bearer ${localStorage.getItem('accessKey')}`
}
})
so I can access itemData.productQTY from itemData. There is also a field in the Database named productQTY, so how do I update the field?
const onSubmit = async itemData => {
console.log(itemData);
const url = `http://localhost:5000/items/${id}`
const { data } = await axios.put(url,
{ productQTY: itemData.productQTY },
{
headers:
{
authorization: `Bearer ${localStorage.getItem('accessKey')}`
}
}
})
u can try it, with data and header in 2 params of put request.
i am trying to change the api fetch into axios get method i dont know how to do that
const fetchApi = () => {
const request = getAllActivityData();
request
.api({
params: {
customer,
},
})
i want to call api like this using axios
i have added full code in codesandbox it will be helpfull if u can edit the codesand box and make it working
useEffect(() => {
const config = {
headers: {
Authorization: `token
},
};
axios.get("customer/get-all-activity-data/?customer=22", config)
.then((res) => {
console.log(res.data);
});
code sandbox
https://codesandbox.io/s/upbeat-jasper-2jmri?file=/src/App.js:3137-3298
what i have tryed the data is not showning but there are no error .
i am getting data in postman
https://codesandbox.io/s/gifted-montalcini-j7nv7?file=/src/App.js
Do you mean something like this, using async await...
const axiosCallFn = async () => {
let url = '...'
let config = {
headers: {
token: '...'
}
}
try {
let resp = await axios.get(url, config)
return resp.data
} catch(e) {
throw e
}
}
// import the function into your component and use it like so
axiosCallFn()
.then((data) => {
// your functionality here.
})
.catch(() => {
// your error functionality here.
})
and then you can call your axiosCallFn in your useEffect.
I would like to refresh the data, when user is back from one page to another.
This is how my useEffect function looks like now:
useEffect(() => {
setIsLoading(true);
AsyncStorage.getItem("user").then((response) => {
const currentData = JSON.parse(response);
setUser(currentData)
fetch('URL',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: currentData.id
}),
}
)
.then(response => response.json())
.then(data => {
setNotis(data.notifications);
setIsLoading(false)
})
.catch(error => {
});
});
}, []);
This function should run every time when user is on the page. Doesn't matter if it was onBackPressed or not.
Thanks
Using React-navigation
We can directly refresh screen if you're using react-navigation
Import #react-navigation/native
import React, { useEffect } from "react";
import { useIsFocused } from "#react-navigation/native";
const HomeScreen = (props) => {
const isVisible = useIsFocused();
useEffect(() => {
console.log("called when screen open and also on close");
// this will call on both screen open and screen close.
if (isVisible) {
console.log("called when screen open or when back on screen ");
}
}, [isVisible]);
return (
......
)
}
I hope it will help.
The real problem here is that the screen is not being unmounted when navigating outside of it, so the hook won't fire since the component is already mounted. There are multiple options to solve this issue just as adding a listener when the screen gets focused/blurred or just watch for the changes for the navigation prop. For the last workaround, you could try something like:
useEffect(() => {
setIsLoading(true);
AsyncStorage.getItem("user").then((response) => {
const currentData = JSON.parse(response);
setUser(currentData)
fetch('URL',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: currentData.id
}),
}
)
.then(response => response.json())
.then(data => {
setNotis(data.notifications);
setIsLoading(false)
})
.catch(error => {
});
});
}, [navigation]);
For watching onFocus event, you could import NavigationEvents from react-navigation and move the logic for the hook inside a function refreshData
import {NavigationEvents} from 'react-navigation`
...
<NavigationEvents onWillFocus={refreshData}/>
Also, you should be setting the isLoading state to false whenever the Promise has settle, for instance you could use
.finally(() => {
setIsLoading(false)
})
I have decided to put all my API calls in a seperate file and they are all stateless.
const get = endPoint => {
let token = "c8c17003468314909737ae7eccd83d4b6eecb792"; //I have put this token here manually
return fetch(endPoint, {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Token " + token
}
}).then(response => response.json());
};
and in the same file i have the actual API calls. Example is as follows.
export const loadGroups = () => {
const endPoint = "https://xxxx.com/api/groups/";
return get(endPoint);
};
This works perfectly when i call the API from various components as follows.
import { loadGroups } from "../../api";
componentDidMount() {
loadGroups()
.then(responseJson => {
this.setState({
groups: responseJson
});
})
.catch(error => {
console.error(error);
});
}
However, I want to use AsyncStorage to retrieve a stored token and the due nature of it is to return a promise. This works well when i write the functions of getting the token and storing it in SetState in every component that I do the calls. I really want to refactor the code and using redux is a pain for me.
so far, i have written a file to get the token and it returns a promise.
import { AsyncStorage, Text } from "react-native";
const MyToken = async () => {
try {
const retrievedItem = await AsyncStorage.getItem("userToken");
const item = JSON.parse(retrievedItem);
return item;
} catch (error) {
return null;
}
};
export default MyToken;
And in the API file, I have re-written the code above to
const get = endPoint => {
MyToken().then(token => {
console.log(token, "try 1"); //this works
const lookupOptions = {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Token " + token
}
};
return fetch(endPoint, lookupOptions).then(response => {
console.log(response.json(), "promise response,json");
response.json();
});
});
};
However, whenever i call loadGroups().then() (like in the first example) function in any component, I get an errors that loadGroups.then() can't be resolved
Is there any way to resolve this without state, redux, mobx keeping in mind i want my API code in stateless functions in seperate modules.
In V2 of get function, you are not returning any Promise. Either put a return statement in get function like
const get = endPoint => {
return MyToken().then(
...
);
}
Or return Promise explicitly from that function, consider following code snippets
const get = endPoint => {
return new Promise((resolve, reject) => {
MyToken().then(token => {
...
fetch(endPoint, lookupOptions)
.then(response => response.json())
.then(resolvedResponse => {
resolve(resolvedResponse);
}).catch(error => {
reject(error);
});
});
});
};
Hope this will help!