如何在React中使用功能组件更新状态来重新渲染页面?

Question

我正在处理POST和GET请求。当用户发出POST请求时，数据存储在数据库中。在GET请求中，我正在从数据库中检索数据。

在我的useEffect中，我使用GET请求来获取数据。它只在页面第一次呈现时起作用。每当我发出POST请求时，它都不会更新状态。我必须手动刷新页面以获取新数据。当我把状态放到我的依赖项中时，只要我在那个组件上，它就会一直发出取回请求。下面是我的代码。

Post请求

正在从子组件发出post请求。

const  addFolder = async() => {
if (!folderName) {
alert("Folder Name Required");
} else {
const projectId = props.match.params.projectId
console.log("Project Id ==> ",projectId)    //use projectId to make a call to the server..
console.log(folderName)
await fetch(`http://localhost:8080/mirFolder/new/${projectId}`,{
method:"POST",
body: JSON.stringify({
"title":folderName,
}),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
}).then((res)=>{
console.log(res)
// window.location.reload()
return res.json();            
}).catch((err) =>{
console.log(err)
})
}
}

GET请求函数

const [state, setstate] = useState([]);
useEffect(() => {
const token = isAuthenticated().token;
const projectId = props.match.params.projectId;

getMirFolderbyProject(token, projectId).then((data) => {
if (data.error) {
console.log(data.error);
} else {
console.log("data ==>", data);
setstate(data);
}
});
}, []);

GET fetch Api

export const getMirFolderbyProject = (token, projectId) =>{
return fetch(`http://localhost:8080/mirFolder/by/${projectId}`, {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
})
.then((response) => {
return response.json();
})
.catch((err) => {
console.log(err);
});
}

Answer 1

这是因为当服务器获得POST时，它将不提供新数据，如果您希望在POST请求之后显示新数据，请确保在POST请求中将新数据提供给客户端。

Answer 2

你应该用变量填充你的依赖数组，当你想要重新渲染组件时

const [state, setstate] = useState([]);
useEffect(() => {
const token = isAuthenticated().token;
const projectId = props.match.params.projectId;

getMirFolderbyProject(token, projectId).then((data) => {
if (data.error) {
console.log(data.error);
} else {
console.log("data ==>", data);
setstate(data);
}
});
}, [token , projectId]);

Answer 3

正如@Klump所说，当您发出POST请求并更新DB中的数据时，为了保持一致性，您需要再次发出GET请求，而不是从POST响应中获取更新的数据。

对于这个，一旦POST请求承诺被解决，你可以使用一个额外的fetching状态来做一个GET请求。

请提供完整的实现，包括GET和POST请求以及所有必要的组件，以进一步开展工作。