Titel umgeschrieben als: Komponente wandelt kontrollierte Eingabe in unkontrollierte Eingabe um
Ich erstelle eine Website mit einem React-Frontend unter Verwendung von GraphQL und Apollo. Ich habe eine Seite erstellt, auf der der Webmaster den Inhalt in einem bestimmten Teil der Seite aktualisieren kann. Es funktioniert, aber ich erhalte ständig eine Fehlermeldung in der Konsole: Die Komponente ändert die kontrollierte Eingabe in eine unkontrollierte Eingabe ...
Ich verwende auch den ReactQuill WYSIWYG-Editor. Ich dachte, das könnte das Problem sein, aber ich habe es entfernt und erhalte immer noch die gleiche Fehlermeldung.
Dies ist der Code für die Inhaltsaktualisierungsseite:
import { useState, useEffect } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { useNavigate, useParams } from 'react-router-dom';
import { GET_CONTENT_BY_ID } from '../../utils/queries';
import { UPDATE_CONTENT } from '../../utils/mutations';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const Content = () => {
const { id } = useParams();
const { loading, data } = useQuery(GET_CONTENT_BY_ID, {
variables: { id: id },
});
const [contentHead, setContentHead] = useState('');
const [contentText, setContentText] = useState('');
useEffect(() => {
const content = data?.contentById || {};
if (content) {
setContentHead(content.contentHead);
setContentText(content.contentText);
}
}, [data, setContentHead, setContentText]);
const [updateContent, { error }] = useMutation(UPDATE_CONTENT);
const navigate = useNavigate();
const submitHandler = async (e) => {
e.preventDefault();
try {
const { data } = await updateContent({
variables: {
id,
contentHead,
contentText,
},
});
navigate('/_admin');
} catch (error) {
console.log(error);
}
};
return (
<Form onSubmit={submitHandler}>
<Form.Group className="mb-3" controlId="contentHead">
<Form.Label>Section Heading</Form.Label>
<Form.Control
value={contentHead}
onChange={(e) => setContentHead(e.target.value)}
required
/>
</Form.Group>
<Form.Group className="mb-3" controlId="contentText">
<Form.Label>Text</Form.Label>
<ReactQuill
name="contentText"
value={contentText}
theme="snow"
onChange={setContentText}
/>
</Form.Group>
<Button type="submit">Submit</Button>
</Form>
);
};
export default Content;
In ReactQuill habe ich onChange={(e) => contentText(e.target.value)} ausprobiert, aber nichts hat sich geändert. So wie es jetzt ist, habe ich es aus ihrem Git-Repository erhalten.
