Reactjs 所有富文本编辑器都会运行onChange函数,而不会对组件进行任何更改?
我尝试了几个react文本编辑器,如Quill、CKEditor和其他编辑器,在我的应用程序中,它们的反应都是一样的 我有一个应用程序可以调用一个api到后端,所以我设置了状态:Reactjs 所有富文本编辑器都会运行onChange函数,而不会对组件进行任何更改?,reactjs,rich-text-editor,quill,Reactjs,Rich Text Editor,Quill,我尝试了几个react文本编辑器,如Quill、CKEditor和其他编辑器,在我的应用程序中,它们的反应都是一样的 我有一个应用程序可以调用一个api到后端,所以我设置了状态: const [values, setValues] = useState({ user:{}, notes: '', prescription: '', }); 我进行API调用 function getInfo() {
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,
});
}
});
}
console.log上的api响应为:
{
user: {name: Mike},
notes: '<p>Line One</p><p>Line Two</p>',
prescription: '<p>Line One</p><p>Line Two</p>'
}
我使用hook useffect来限制api get:
useEffect(() => {
getInfo();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
我将羽毛笔的两个组成部分渲染为:
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上的状态更改为初始状态,除一个富编辑器外,所有字段中都有空格
我用文本区域组件更改组件(富格文本编辑器),即使使用相同的函数和值,也能像我预期的那样工作,只需更改组件
有人可以解释为什么组件在没有任何句柄更改的情况下触发句柄更改?或者如何解决我的问题
return(
<Fragment>
<ReactQuill
theme='bubble'
value={values.notes}
onChange={handleQuillChange('Notes')}
/>
<ReactQuill
theme='bubble'
value={values.prescription}
onChange={handleQuillChange('Prescription')}
/>
</Fragment>
)