如何通过使用功能组件更新 React 中的状态来重新渲染页面。？

Posted 2023-03-17

【中文标题】如何通过使用功能组件更新 React 中的状态来重新渲染页面。？

【英文标题】：How to re-render a page by updating the state In React using functional component.?

【发布时间】：2021-11-22 04:58:56

【问题描述】：

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

在我的 useEffect 中，我使用 GET 请求来获取数据。它仅在页面第一次呈现时有效。每当我发出 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);
    
    );
 , []);

获取获取 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);
  );

【参考方案1】：

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

【讨论】：

你能给我举个例子吗？

【参考方案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]);

【参考方案3】：

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

为此，一旦 POST 请求承诺得到解决，您可以使用额外的 fetching 状态来发出 GET 请求。

请提供包含GET 和POST 请求的完整实现以及进一步处理它所需的所有组件。

【讨论】：

我正在通过完整的实施更新问题

问题已更新