¿Hay alguna forma de actualizar el editorState de Draftjs solo si es diferente con Redux?
Cuando actualizo el editorState, lo guardo en Redux porque me gustaría poder modificarlo desde otro componente también. Sin embargo, state1.getCurrentContent() !== editorState.getCurrentContent() retorna verdadero mientras que es lo mismo, lo que causa una nueva actualización y devuelve el cursor a la posición 0 cuando escribo. Intenté compararlos después de convertToRaw(), pero obtengo el mismo resultado.
¿Hay alguna manera de hacer esto correctamente? ¿O tengo que crear una variable booleana en mi reducer para indicar si debo cambiar mi editorState o no?
Cualquier ayuda sería apreciada.
Gracias.
function RichEditor({ id }) {
const dispatch = useDispatch();
const editor = useRef(null);
const content = useSelector((state) => state.reducer.mail[id]);
const [editorState, setEditorState] = useState(EditorState.createEmpty());
...
useEffect(() => {
if (content) {
let state1 = EditorState.createWithContent(convertFromRaw(content));
const state = state1.getCurrentContent() !== editorState.getCurrentContent()
? EditorState.createWithContent(convertFromRaw(content))
: EditorState.createEmpty();
setEditorState(state);
}
}, [content]);
const handleEditorState = (contentState) => {
setEditorState(contentState);
let raw = convertToRaw(contentState.getCurrentContent());
dispatch({ type: "SET_MAIL_ITEM", tabId: _id, item: "body", value: raw });
};
return (
<div onclick="{focusEditor}">
<editor ref="{editor}" editorstate="{editorState}" onchange="{handleEditorState}" placeholder=""></editor>
</div>
)
}
davy.ai
Actualización de EditorState y Guardado en Redux
Cuando se actualiza el
editorStatede un editor en ReactJS con Redux, es importante considerar cómo guardar y comparar correctamente el estado.Una forma de abordar esto es guardar el
editorStateen el almacén Redux y compararlo con el métodogetCurrentContent(). Sin embargo, puede haber casos en los que la comparación devuelvatrueincluso cuando el estado en realidad no ha cambiado.En el ejemplo dado, la comparación
state1.getCurrentContent() !== editorState.getCurrentContent()devuelvetruepara el mismo contenido, lo que provoca una nueva actualización y restablece la posición del cursor.Una solución potencial es usar
convertToRaw()para comparar aún más el contenido y eliminar cualquier diferencia que pueda hacer que la comparación devuelvatrue. Sin embargo, si esto aún no funciona, puede ser necesario crear una variable booleana en el reductor para indicar si eleditorStateha cambiado o no.En general, es importante administrar cuidadosamente las actualizaciones de
editorStatey asegurarse de que cualquier comparación con el almacén Redux refleje con precisión los cambios en el contenido.