React Quill 默认值不会通过 API 调用显示

Question

我正在使用 React quill 来设置编辑器。我想用 API 中的数据预先填充编辑器，但是当我使用

defaultValue

时，它不会呈现。我可以

console.log

从API获取数据没有问题。这是代码......

const GET_ISP_ENTRY = gql`
  query IspListEntry($ispListEntryId: ID!) {
    ispListEntry(id: $ispListEntryId) {
      _id
      displayName
      contactFirstName
      contactLastName
      contactTitle
      lastUpdated
      onlineService
      onlineAttn
      address
      city
      state
      zipCode
      country
      phoneNumber
      extension
      mobileNumber
      faxNumber
      email
      website
      referTo
      notes
      previous
    }
  }
`;

const UPDATE_ISP_ENTRY = gql`
  mutation UpdateISPEntry($ispListEntryUpdateId: ID!, $input: UpdateISPEntry) {
    ispListEntryUpdate(id: $ispListEntryUpdateId, input: $input) {
      displayName
    }
  }
`;

const UpdateISPEntry = () => {
  const [formValues, setFormValues] = useState();
  const [urlId, setUrlId] = useState('');
  const [notesFromAPI, setNotesFromAPI] = useState();
  const [previousState, setPreviousState] = useState();
  const [getIsp, { data, loading, error }] = useLazyQuery(GET_ISP_ENTRY, {
    variables: {
      ispListEntryId: urlId
    },
    onCompleted: () => {
      setNotesFromAPI(data && data.ispListEntry.notes);
    },
    onError: () => {
      toast.error(error);
    }
  });

  console.log(loading ? 'Loading...' : notesFromAPI);

  const [
    submitValues,
    { data: successful, loading: successLoading, error: loadingError }
  ] = useMutation(UPDATE_ISP_ENTRY, {
    onError: () => {
      toast.error(`There was an error ${loadingError}`);
    }
  });

  const params = useLocation();
  const path = params.pathname;
  const pathSplit = path.split('/')[2];

  const [notesState, setNotesState] = useState();

  useEffect(() => {
    getIsp();
    setFormValues(data && data.ispListEntry);

    setUrlId(pathSplit);
  }, [data, getIsp, pathSplit, formValues]);

  const handleSubmit = () => {};

  return (
    <Fragment>
      <div className='container p-4 parent-container'>
        <ISPFormHeader />
        <ISPFormHeaderPagename children='Update ISP Entry' />
        <ISPForm
          initialValues={data && data.ispListEntry}
          enableReinitialize={true}
          onSubmit={handleSubmit}
        />
        <div className='editor-fields'>
          <EditorComponent
            defaultValue={notesFromAPI}
            state={notesState}
            onChange={setNotesState}
          />
        </div>
        <div className='editor-fields'>
          <EditorComponent
            placeholder='Enter Previous Notes Here'
            state={previousState}
            onChange={setPreviousState}
          />
        </div>
      </div>
    </Fragment>
  );
};

export default UpdateISPEntry;

和编辑器组件...

import React from 'react';
import ReactQuill from 'react-quill';

const modules = {
  toolbar: [
    [{ font: [] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }, { background: [] }],
    [{ script: 'sub' }, { script: 'super' }],
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ indent: '-1' }, { indent: '+1' }, { align: [] }],
    ['link', 'image', 'video'],
    ['clean']
  ]
};

const EditorComponent = ({ placeholder, state, onChange, defaultValue }) => {
  return (
    <ReactQuill
      defaultValue={defaultValue}
      modules={modules}
      theme='snow'
      placeholder={placeholder}
      state={state}
      onChange={onChange}
    />
  );
};

export default EditorComponent;

Answer 1

react quill 接受字符串作为默认值，因此如果您的数据位于对象中，则默认值将不起作用

<div>
  <ReactQuill
  value={`${previousData}`}
    theme="snow"
    modules={modules}
    placeholder="Write your content 
     here...",
    onChange={handleChange}
    
  />
</div>