CKEditor 更新 React 状态

问题描述

我在 React 中使用 ckeditor5。

功能：用户创建多个带有答案选项的问题。

代码的简化版：

function QuestionComponent() {
  const [questions,setQuestions] = useState([{ question: null,choices: [] }]);
  const [index,setIndex] = useState(0);

  function prevIoUs(e) {
    e.preventDefault();

    setIndex(index - 1);
  }

  function next(e) {
    e.preventDefault();

    // Adding new empty question
    if (questions.length <= index + 1) {
      setQuestions([...questions,{ question: null,choices: [] }]);
    }

    setIndex(index + 1);
  }

  function handleQuestionInput(value) {
    setQuestions(
      questions.map((el,i) => {
        if (i === index) {
          el.question = value;
        }

        return el;
      })
    );
  }

  function handleChoiceInput(value,choiceIndex) {
    setQuestions(
      questions.map((el,i) => {
        if (i === index) {
          el.choices[choiceIndex].text = value;
        }

        return el;
      })
    );
  }

  return (
    <>
       <CKEditor
          editor={Editor}
          config={EditorConfig}
          data={questions[index].question || ""}
          onChange={(event,editor) => {
          const data = editor?.getData();
          handleQuestionInput(data);}}
        />

        <div className="choices-Box">
          {questions[index].choices.map((el,i) => (
            <CKEditor
              editor={Editor}
              config={EditorConfig}
              data={el.text || ""}
              onChange={(event,editor) => {
              const data = editor?.getData();
              handleChoiceInput(data,i);
              }}
            />))
          }
        </div>

        <button
           type="submit"
           label="PrevIoUs"
           onClick={prevIoUs}
         />
          <button
           type="submit"
           label="Next"
           onClick={next}
         />
         
}

问题：每当点击下一个或上一个时当前问题 (questions[index].question)值被清除并设置为 ""（或来自 data={questions[index].question || ""} 的默认值）。但是，选择会保持它们的状态并且运行良好。

我测试了如果我使用简单的输入

更改CKEditor，此代码运行良好

我也想知道为什么它适用于选择，而不适用于问题

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）