Better-react-mathjax 中的排版问题

如何解决Better-react-mathjax 中的排版问题

我使用 better-react-mathjax 进行方程式书写和阅读。基本上，我在问题中使用了方程中的 MathJax。首次加载时不会产生问题。

但是当我使用 React sate 进行过滤时，它会产生排版问题，并且下一个应用程序崩溃了。

我该如何解决问题？

MathJax

import React from 'react'
import { MathJax,MathJaxContext } from "better-react-mathjax";

const config = {
    loader: { load: ["input/asciimath"] }
};

export const MathJaxOutput = ({ text }) => {
    return <MathJaxContext config={config} version={3}>
        <MathJax dynamic inline>
            {text}
        </MathJax>
    </MathJaxContext>
}

错误截图是

当标记和课程名称更改时自动加载相关问题。

state = {
        courseName: '',selectedTopics: [],mark: null,questions:[]
   }

componentDidUpdate(prevProps,prevstate) {
        if (this.state.courseName !== prevstate.courseName || this.state.selectedTopics !== prevstate.selectedTopics || this.state.mark !== prevstate.mark) {
            if (this.state.courseName) {
                this.props.getCourseQuestions(this.state.courseName,this.state.selectedTopics,this.state.mark);
            }
        }
    }

输出渲染

{
  this.state.questions.map((question,questionIndex) => (
                    <div className='input-question-field-items' key={questionIndex}>
                            <div className='preview-field-item'>
                                <MathJaxOutput text={<p>{question.questionInput.question}</p>} />
                            </div>
                    </div>
}