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

Question

我有一个简单的问题，关于在不重新呈现整个页面的情况下重新呈现功能性 React js 组件。在几个帖子中看到人们在谈论：库：REACT-ROUTER-DOMhistory.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++)声明。这是将触发重新渲染的语句。