все редакторы форматированного текста запускают функции onChange без каких-либо изменений в компоненте? - PullRequest
Новая
       127

все редакторы форматированного текста запускают функции onChange без каких-либо изменений в компоненте?

1 голос
/ 07 августа 2020

Я пробовал работать с несколькими текстовыми редакторами, такими как Quill, CKEditor и другими, и все они одинаково реагируют на мое приложение. состояние: 

   const [values, setValues] = useState({
            user:{},
            notes: '',
            prescription: '',
     });

Я делаю ВЫЗОВ API 

function getInfo() {
        //Traer la información de la consulta
        getdataAPI(id).then((response) => {
            if (response.data.error) {
                console.log(response.data.error);
            } else {
                console.log('FROM API TO SET ON VALUES ACT:', response.data);
                setValues({
                    ...values,
                    user: response.data.patient,
                    notes: response.data.notes,
                    prescription: response.data.prescription,
                });
            }
        });
    }

Ответ api в console.log: 

{
user: {name: Mike},
notes: '<p>Line One</p><p>Line Two</p>',
prescription: '<p>Line One</p><p>Line Two</p>'
}

Итак, у меня есть Функция handleChange: 

const handleQuillChange = (name) => (value) => {
        console.log('Entro a Handle...');
        if (name === 'Prescription') {
            console.log('Entro PRES');
            setValues({ ...values, prescription: value });
        }
        if (name === 'Notes') {
            console.log('Entro a NOTES');
            setValues({ ...values, notes: value });
        }
    };

Я использую перехватчик useEffect для ограничения получения API: 

useEffect(() => {
    getInfo();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Я визуализирую два компонента quill следующим образом: 

return(
<Fragment>
    <ReactQuill
          theme='bubble'
          value={values.notes}
          onChange={handleQuillChange('Notes')}
    />
 <ReactQuill
          theme='bubble'
          value={values.prescription}
          onChange={handleQuillChange('Prescription')}
  />
</Fragment>
)

Ожидаемый результат - иметь 2 редактора форматированного текста со значениями из API. Но один из них всегда начинается с пустого места ...

Отладка Я обнаружил, что компоненты в редакторах форматированного текста запускают функцию handleChange без каких-либо изменений ... и это меняет состояние из состояния API в исходное состояние с пробелами во всех полях, кроме одного из расширенных редакторов ...

Я меняю эти компоненты (редакторы форматированного текста) на компоненты текстовой области и работает, как я ожидал, даже с те же функции и значения, просто изменяя компоненты ...

Кто-нибудь может объяснить мне, почему компоненты вызывают изменение дескриптора без изменения дескриптора? или как решить возникшую у меня проблему?

...