Titre réécrit comme suit : Le composant transforme une entrée contrôlée en entrée non contrôlée

Question

Je crée un site Web avec une interface React en utilisant GraphQL et Apollo. J'ai créé une page où le webmaster peut mettre à jour le contenu dans une partie spécifique de la page, cela fonctionne, mais j'obtiens toujours une erreur dans la console : Le composant change l'entrée contrôlée en entrée non contrôlée...

J'utilise également l'éditeur ReactQuill WYSIWYG. Je pensais que cela pourrait être le problème, mais je l'ai supprimé et j'obtiens toujours la même erreur.

Voici le code de la page de mise à jour du contenu :

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;

Dans ReactQuill, j'ai essayé onChange={(e) => contentText(e.target.value)} mais rien n'a changé. La situation actuelle est ce que j'ai obtenu de leur référentiel git.

Answer 1

J'ai trouvé la réponse dans une autre question ici. Bien que ce ne soit pas la réponse acceptée, cela résout l'erreur.

Dans ReactJS, le composant change la saisie de texte non contrôlée en erreur contrôlée

Donc, pour mon formulaire, j'ai changé value={contentHead} et value={contentText} en value={contentHead || ''} et value={contentText || ''} et cela a résolu l'erreur !