Tajuk ditulis semula sebagai: Komponen menukar input terkawal kepada input tidak terkawal

Question

Saya sedang membina tapak web dengan bahagian hadapan React menggunakan GraphQL dan Apollo. Saya mencipta halaman di mana juruweb boleh mengemas kini kandungan dalam bahagian tertentu halaman, ia berfungsi, tetapi saya terus mendapat ralat dalam konsol: Komponen menukar input terkawal kepada input tidak terkawal...

Saya juga menggunakan editor ReactQuill WYSIWYG. Saya fikir ini mungkin masalahnya tetapi saya telah mengeluarkannya dan masih mendapat ralat yang sama.

Ini ialah kod untuk halaman kemas kini kandungan:

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;

Dalam ReactQuill saya mencuba onChange={(e) => contentText(e.target.value)} tetapi tiada apa yang berubah. Caranya sekarang ialah apa yang saya dapat dari repositori git mereka.

Answer 1

Saya temui jawapannya dalam soalan lain di sini. Walaupun ia bukan jawapan yang diterima, ia menyelesaikan ralat.

Dalam ReactJS, komponen menukar input teks tidak terkawal kepada ralat terkawal

Jadi untuk borang saya, saya menukar value={contentHead} dan value={contentText} kepada value={contentHead || ''} dan value={contentText || ''} dan itu menyelesaikan ralat!