警告:组件正在更改不受控制的输入以进行控制。

Question

我有一个项目，这个项目是为了经营一个承包和建筑公司，我有一个文件，它是公司每一张发票的信息，这个文件是一组字段，但是我有这个错误，我不知道原因，或者我如何解决它？

index.js:1警告:组件正在将不受控制的输入更改为被控制。这很可能是由于值从未定义的值更改为定义的值，而这种情况不应该发生。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。更多信息：https://reactjs.org/link/controlled-components

此文件显示一组字段。

import { getInvoice } from "../../store/invoiceSlice";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import moment from "moment";
import { useTheme } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import TodayIcon from "@material-ui/icons/Today";
import { makeStyles } from "@material-ui/core/styles";
import { PDFViewer } from "@react-pdf/renderer";
import { Document, Page } from "react-pdf";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
    },
  },
  input: {
    display: "none",
  },
  button: {
    margin: theme.spacing(1),
    // padding: theme.spacing(4),
  },
}));
const InvoiceDetails = () => {
  const classes = useStyles();
  const theme = useTheme();
  const breakpoint = theme.breakpoints.down("sm");
  const routeParams = useParams();
  const [invoice, setInvoice] = useState([]);

  // const defaultLayoutPluginInstance = defaultLayoutPlugin();

  useEffect(() => {
    getInvoice(routeParams).then((response) => {
      setInvoice(response);
    });
  }, []);

  console.log("invoice url: ", invoice?.file?.url);
  console.log("invoice tara : ", invoice);

  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  return (
    <>
      <Grid container>
        <Grid item xs={7} sm={7} style={{ height: "100vh", width: "100vh" }}>
          {/* <PDFViewer file={invoice?.file?.url}></PDFViewer> */}
          <Document
            file={invoice?.file?.url}
            onLoadSuccess={onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} />
          </Document>
          <p>
            Page {pageNumber} of {numPages}
          </p>
        </Grid>
        <Grid item xs={5} sm={5} style={{ padding: "3rem" }}>
          <Grid item>
            <h1 style={{ fontWeight: "bold" }}>Invoice Details</h1>
          </Grid>

          <Grid item style={{ marginTop: "3rem", marginBottom: "2rem" }}>
            <Grid item style={{ marginBottom: 10 }}>
              <h3>From</h3>
            </Grid>
            <Grid item>
              <h3>{invoice?.submittedBy?.name}</h3>
            </Grid>
            <Grid item>
              <h3>{invoice?.submittedBy?.email}</h3>
            </Grid>
          </Grid>

          <Grid item>
            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Invoice ID</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  id="outlined-size-normal"
                  value={invoice.id}
                  variant="outlined"
                  fullWidth
                />
              </Grid>
            </Grid>

            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Issue Date</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  id="outlined-size-normal"
                  value={moment(moment.utc(invoice.issueDate).toDate())
                    .local()
                    .format("YYYY-MM-DD HH:mm:ss")}
                  variant="outlined"
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="start">
                        <TodayIcon />
                      </InputAdornment>
                    ),
                  }}
                  fullWidth
                />
              </Grid>
            </Grid>

            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Due Date</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  id="outlined-size-normal"
                  value={moment(moment.utc(invoice.dueDate).toDate())
                    .local()
                    .format("YYYY-MM-DD HH:mm:ss")}
                  variant="outlined"
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="start">
                        <TodayIcon />
                      </InputAdornment>
                    ),
                  }}
                  fullWidth
                />
              </Grid>
            </Grid>

            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Net Amount</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  id="outlined-size-normal"
                  value={invoice.netAmount}
                  variant="outlined"
                  fullWidth
                />
              </Grid>
            </Grid>

            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Tax Number</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  id="outlined-size-normal"
                  value={invoice.taxNumber}
                  variant="outlined"
                  fullWidth
                />
              </Grid>
            </Grid>

            <Grid container item direction={breakpoint ? "row" : "column"}>
              <Grid
                container
                item
                xs={3}
                sm={3}
                direction="row"
                justifyContent="flex-start"
                alignItems="center"
              >
                <h3>Gross Amount</h3>
              </Grid>
              <Grid item xs={9} sm={9}>
                <TextField
                  className="mt-8 mb-16"
                  // label="Size"
                  id="outlined-size-normal"
                  value={invoice.grossAmount}
                  variant="outlined"
                  fullWidth
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

export default InvoiceDetails;

Answer 1

如果您将组件的值设置为未定义的值支柱，则它们将变得不受控制。这就是一个例子：

<TextField
 className="mt-8 mb-16"
 id="outlined-size-normal"
 value={invoice.id} // invoice.id is initially undefined
 variant="outlined"
 fullWidth
/>

然后，一旦运行setInvoice()来定义这些值，组件就会被控制。要使它们始终受到控制，您可以做的是设置一个适当的状态初始值，如下所示：

const [invoice, setInvoice] = useState({ // Note that the initial value is an object and not an array
 id: "",
 issueDate: null,
 netAmount: 0,
 taxNumber: 0,
 grossAmount: 0
});

或者，您也可以对您的每个组件执行以下操作：

<TextField
 className="mt-8 mb-16"
 id="outlined-size-normal"
 value={invoice.id || ""}
 variant="outlined"
 fullWidth
/>

Answer 2

我相信这是由你的invoice从[]开始的。因此，像invoice.id这样的字段最初将是null，当您最终从API & set数据获取数据到invoice时，invoice.id变为非空，因此语句：This is likely caused by the value changing from undefined to a defined value

要解决警告，您可能必须在useState中声明发票的所有属性。例：

useState({
    id: "",
    issueDate: "",
    dueDate: "",
})

或者，如果您不打算控制输入，那么使用defaultValue而不是value来实现TextFields。有什么关系呢？使用value，您必须提供onChange。