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

Question

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

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

---

库：反应路由器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

Answer 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++)语句。 这是会触发重新渲染的语句。