标题重写为：组件正在将受控输入转变为非受控输入

Question

我正在使用GraphQL和Apollo构建一个具有React前端的网站。我创建了一个页面，网站管理员可以在页面的特定部分更新内容，它可以工作，但是我一直在控制台中收到错误：组件正在将受控输入更改为非受控输入...

我还使用了ReactQuill所见即所得编辑器。我以为这可能是问题所在，但我已经将它删除了，但仍然收到相同的错误。

这是内容更新页面的代码：

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;

在ReactQuill中，我尝试了onChange={(e) => contentText(e.target.value)}，但没有任何变化。现在的方式是我从他们的git存储库中得到的。

Answer 1

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

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

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