我如何避免此警告＆＃x27;组件正在更改要控制的不受控制的输入。这很可能是由于...＆＃x27;

Question

    const AddItem = () => {
  const [user] = useAuthState(auth);
  const navigate = useNavigate();

  const handleAddCar = (e) => {
    e.preventDefault();
    const carObj = {
      name: e.target.name.value,
      supplier: e.target.supplier.value,
      email: user.email,
      price: parseInt(e.target.price.value),
      quantity: parseInt(e.target.quantity.value),
      description: e.target.description.value,
      img: e.target.image.value,
      sold: parseInt(e.target.sold.value),
    };
    axios
      .post("http://localhost:5000/car", carObj)
      .then((response) => {
        toast("Successfully Added");
      });
    e.target.reset();
  };
  return (
    <div>
      <Container>
        <Row>
          <div className="col-md-6 mx-auto">
            <h2 className="my-5">Add A Car</h2>
            <Form onSubmit={handleAddCar}>
              <Form.Group className="mb-3" controlId="formBasicModel">
                <Form.Label>Model</Form.Label>
                <Form.Control type="text" name="name" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicSupplier">
                <Form.Label>Supplier</Form.Label>
                <Form.Control type="text" name="supplier" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  value={user.email}
                  readOnly
                  disabled
                />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicPrice">
                <Form.Label>Price</Form.Label>
                <Form.Control type="number" name="price" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicQuantity">
                <Form.Label>Quantity</Form.Label>
                <Form.Control type="number" name="quantity" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicDescription">
                <Form.Label>Description</Form.Label>
                <br />
                <textarea
                  className="w-100"
                  name="description"
                  required
                ></textarea>
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicImage">
                <Form.Label>Image</Form.Label>
                <Form.Control type="text" name="image" required />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicImage">
                <Form.Label>Sold</Form.Label>
                <Form.Control type="number" name="sold" required />
              </Form.Group>

              <Button variant="primary" type="submit" className="w-100 fw-bold">
                Add Car
              </Button>
            </Form>
          </div>
        </Row>
      </Container>
    </div>
  );
};

我正在尝试通过设置一些默认值并需要所有输入字段的表单中添加MongoDB数据库中的项目。它正在正常工作，但在控制台上发出警告：“组件正在更改要控制的不受控制的输入。这可能是由于从未定义为定义值的价值更改而引起的，这不应发生。”

Answer 1

您的问题在这里：

<Form.Control
   type="email"
  value={user.email}
  readOnly
  disabled
/>

您可以看到您将此组件的值设置为user..email，使其成为受控的输入（通常通过状态传递该值并从父组件中控制）。

一个不受控制的组件组件本身处理值。

我猜想您的用户对象（或至少是电子邮件参数）不确定，然后通过某种类型的API调用填充。

您要么需要始终具有user.email在渲染此输入时可用的参数（例如，将输入包装在检查中，因此仅在user.email.email！==未定义时才呈现，或添加了一个寄存器电子邮件当用户对象首先初始化时），或者不太理想地为该值不确定时提供值。 （例如value = {user.email ??' - '}）