Question

我有一个简单的问题，关于重新渲染功能性的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

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++)语句。那条语句将触发重新渲染。

重新渲染React js功能组件SPA

1 个答案: