react-mathjax渲染两次如何解决？

编程问答 2022-06-05

问题描述

我正在尝试在react-mathjax中使用reactjs。

以下是我的代码。

    import React,{ useState } from "react";
    import MathJax from "react-mathjax";
    
    export default function App() {
      const [text,setText] = useState("");
      
      const handleOnChange = (e) => {
        setText(e.target.value);
        console.log(e.target.value);
      };
    
      return (
        <>
          <textarea onChange={handleOnChange} />
          <MathJax.Provider>
            <MathJax.Node formula={text} />
          </MathJax.Provider>
        </>
      );
    }

在第一次加载时，它工作正常。但是在键入一些乳胶并擦除之后，它将两次渲染该公式。

它与严格模式无关。我已经尝试过了。

解决方法

有几个名为 react-mathjax 的库。在这个答案中，我假设你正在使用这个：https://github.com/SamyPesse/react-mathjax

图书馆很久没有更新了。我建议切换到支持 MathJax v3 的维护库。

选项：

免责声明：我是 react-mathjax-node 的作者。

mathjaxreactjsreactjsreactjsreactjsrenderrenderrender