重新渲染一个 React js 功能组件，SPA答案

【问题标题】：Re-Render a React js functional component, SPA重新渲染一个 React js 功能组件，SPA
【发布时间】：2021-01-19 22:20:53
【问题描述】：

我有一个关于在不重新渲染整个页面的情况下重新渲染功能性 react js 组件的简单问题。

在几个帖子中看到人们在谈论：

库：REACT-ROUTER-DOM

history.push("/");
history.goBack();

这确实有效，它重新渲染了我的组件，并且负责在我的 DOM 中加载数据的 useEffect 挂钩工作正常，但是在两次重新渲染后，我的控制台出现错误：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

这是history.push()和history.goBack()方式的问题，因为当我删除它们时没有错误。

此错误来自在未安装的组件中执行的操作，所以我的问题是。

如何重新渲染一个组件，以便我最初的 useEffect 挂钩可以获取所需的数据？

这是我的代码的一部分。

这是组件挂载时触发的useEffect。

useEffect(() => {
    const getCategorias = async () => {
      try {
        const responseData = await sendRequest('http://localhost:5000/api/admin/categorias/')
        setCategoriasData(responseData.categoriasActivas)
      } catch (err) {
        console.log(err)
      }
    }
    getCategorias()

  }, [sendRequest])

这就是“POST”动作，当 history.push() 和 history.goBack() 重新渲染组件并且由于 useEffect HOOK 而显示新数据时。

try {
        setEnviando(true)
        await sendRequest(
          "http://localhost:5000/api/admin/categorias",
          "POST",
          JSON.stringify({
            nombre: categoriaNueva,
            color: color,
          }),
          {
            "Content-type": "application/json",
          }
        )
        message.success("Categoria creada exitosamente.")
        

        history.push("/dashboard/");
        history.goBack()
        
      } catch (err) {
        setEnviando(false)
        let error = err.toString()
        message.error(error)
        setColor("")
        setCategoriaNueva("")
      }
    }

正如我之前所说的一切都很好，我只是在重新渲染部分遇到了问题。如果有人可以帮助我，我会很感激，如果没有，也许一些指导我的文档会很好......

thank you very much

【问题讨论】：

history.push("/"); history.goBack(); 为什么同时需要两者？
@PrateekThapa 我想触发 useEffect 钩子，以便我的 DOM 获取最新的数据，并且我得到了底部的答案。

标签： javascript reactjs dom react-router

【解决方案1】：

重新渲染组件的最简单方法之一是更新它的状态。因此，您可以做的是，只需向组件添加一些状态并在您想要触发重新渲染时对其进行更新，如下所示：

const MyComponent = () => {
...
const [updateFlag, setUpdateFlag] = useState(0);
    try {
        setEnviando(true)
        await sendRequest(
          "http://localhost:5000/api/admin/categorias",
          "POST",
          JSON.stringify({
            nombre: categoriaNueva,
            color: color,
          }),
          {
            "Content-type": "application/json",
          }
        )
        message.success("Categoria creada exitosamente.")
        

        setUpdateFlag(updateFlag++);
        
      } catch (err) {
        setEnviando(false)
        let error = err.toString()
        message.error(error)
        setColor("")
        setCategoriaNueva("")
      }
    }
...
...
}

注意setUpdateFlag(updateFlag++) 语句。这就是会触发重新渲染的语句。

【讨论】：