CKEditor未填充数据接收到API

Question

目前我正在使用formik来显示从API接收到的数据，它在enableReinitialize={true}，但我现在也使用CKEditor，我期待CKEditor显示从API收到的数据，以下是我的代码:

<Formik
enableReinitialize={true}
initialValues={id ? updatedSchema : initialValues}
validationSchema={AddNewSchema}
onSubmit={(values) => {
dispatch(actions.createFAQ(values));
}}
>
{({ handleSubmit, setFieldValue }) => (
<>
<Form className="form form-label-right">
<div className="form-group">
<Field name="question" component={Input} label="Question *" withFeedbackLabel={false} />
<ErrorMessage name="question" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label>Answer *</label>
<CKEditor
name="answer"
editor={ClassicEditor}
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setFieldValue("answer", data);
}}
/>
</div>
<ErrorMessage name="answer" component="div" className="invalid-feedback" />
<div className="row">
<div className="col-md-6 form-group">
<Select name="status" label="Status *" withFeedbackLabel={false}>
{status.map((option, key) => (
<option key={key} value={option.value}>
{option.label}
</option>
))}
</Select>
</div>
</div>
<button type="submit" className="btn btn-primary ml-2">
Save
</button>
</Form>
</>
)}
</Formik>

期望:https://i.stack.imgur.com/hY8ky.png实际https://i.stack.imgur.com/RjYhm.png

Answer 1

在react CKEditor中，它有一个data属性，允许显示初始数据，我只是用它来显示从服务器/API接收的数据

<CKEditor name="answer" editor={ClassicEditor} data={updatedSchema.answer} 
onChange={(event, editor) => {
const data = editor.getData();
setFieldValue("answer", data);
}}
/>