发布请求不适用于提取和反应

Question

将在脉轮UI模式中输入的数据发送帖子请求

function Create() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [sku, setSku] = React.useState("");
  const [name, setName] = React.useState("");
  const [unit, setUnit] = React.useState("");
  const handleChangesku = (event) => setSku(event.target.value);
  const handleChangeName = (event) => setName(event.target.value);
  const handleChangeUnit = (event) => setUnit(event.target.value);
  
  function handleClick() {
    fetch("/products", {
      method: "POST",
      body: JSON.stringify({
        sku: sku,
        name: name,
        primary_unit: unit
      })
    }).then((res) => res.json());
    // Update the state with the received response
  }
  return (
    <>
      <Button onClick={onOpen}>Create Product</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Create Product</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text mb="8px">SKU</Text>
            <Input
              value={sku}
              onChange={handleChangesku}
              placeholder="SKU"
              size="sm"
            />
            <Text mb="8px">Name</Text>
            <Input
              value={name}
              onChange={handleChangeName}
              placeholder="Name"
              size="sm"
            />
            <Text mb="8px">Unit</Text>
            <Input
              value={unit}
              onChange={handleChangeUnit}
              placeholder="Unit"
              size="sm"
            />
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Cancel
            </Button>
            <Button colorScheme="blue" mr={3} onClick={handleClick}>
              Create
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

export default Create;

以下是我的代码，当我在模态中单击创建时，在我运行此代码时， 。检查检查面板的网络部分时，我会遇到以下错误：

0: {field: "sku", message: "This field is required"}
1: {field: "name", message: "This field is required"}
2: {field: "primary_unit", message: "This field is required"}

如何解决此问题？我试图使用Hook Usecallback，而不仅仅是普通的HandleClick来更改USESTATE变量的值，但它不起作用。我是否一定需要表格，以便我可以添加onsubmit？