I have a small problem. I have this fetch data in one component which is working perfectly:
const [item, setItem] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch("https://api/products")
.then((response) => response.json())
.then((data) => setItem(data))
.finally(() => setLoading(false));
}, []);
Then I have this POST in a different component:
const handleSubmit = async (e) => {
e.preventDefault();
try {
await fetch("https://api/products", {
method: "POST",
headers: { admin: "true", "Content-Type": "application/json" },
body: JSON.stringify(body),
});
} catch (error) {
console.log("error");
}
};
How I can get the new data of the first component after using POST without reloading the web page?
CodePudding user response:
You need to be able to append that new data, body
inside item
array, means you need to call this setItem(prev => [...prev, body])
in your try-catch
, something like:
const handleSubmit = async (e) => {
e.preventDefault();
try {
await fetch("https://api/products", {
method: "POST",
headers: { admin: "true", "Content-Type": "application/json" },
body: JSON.stringify(body),
});
setItem(prev => [...prev, body]); // here you add the new data
} catch (error) {
console.log("error");
}
};
Now how you would access this setItem
function? Well if the component that's making the POST request is a child of the component where you have this line const [item, setItem] = useState([])
, you could pass setItem
as a props
.
If it's not the case, either you move this const [item, setItem] = useState([])
inside a component that's parent of all those components and pass down what you need as props
or use a state management solution like the context API
.
CodePudding user response:
You must call the function again when response is true. I mean your function when getting data.