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

Question

我有一个简单的问题，关于在不重新呈现整个页面的情况下重新呈现功能性 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

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