Titel umgeschrieben als: Komponente wandelt kontrollierte Eingabe in unkontrollierte Eingabe um

Question

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.

Answer 1

我在这里的另一个问题中找到了答案。虽然它不是被接受的答案，但它可以解决错误。

在ReactJS中，组件正在将未控制的文本输入更改为受控错误

所以对于我的表单，我将value={contentHead}和value={contentText}更改为value={contentHead || ''}和value={contentText || ''}，这样就可以解决错误了！