javascript - 在 Next.js 中更新表单数据

Question

我有一个更新 React 记录的表单。当按下编辑按钮并重定向到表单时，表单首先获取详细信息数据。然后将详细信息填充到每个适当的表单字段中以供用户显示。

到目前为止，这是我的结构：

const EditCrop = () => {
  const dispatch = useDispatch();
  const router = useRouter();
  const cropUuid = router.query.uuid;

  //Defining Component State
  const [cropName, setCropName] = useState('');
  const [cropAbbreviation, setCropAbbreviation] = useState('');
  const [strPartNumber, setStrPartNumber] = useState('');

  // Getting details from redux state to populate them on the form fields 
  const cropDetail = useSelector((state) => state.cropDetail);
  const { loading, error, crop } = cropDetail;

  const cropEdit = useSelector((state) => state.cropEdit);
  const {
    loading: loadingEdit,
    success: successEdit,
    error: errorEdit,
  } = cropEdit;

  useEffect(() => {
    // This to fetch the details once this component loads
    if (!crop || cropUuid) {
      dispatch(getCropDetails(cropUuid));
    } else {
      // This does no set the details form data in the form fields
      setCropName(crop.cropName)
      setCropAbbreviation(crop.cropAbbreviation);
      setStrPartNumber(crop.strPartNumber);
    }
  }, []);

  const cropEditHandler = (e) => {
    e.preventDefault();
    const crop = {
      uuid: cropUuid,
      cropName,
      cropAbbreviation,
      strPartNumber,
    };
    dispatch(editCrop(crop));
  };

return (
    <>
      <Header />
      <Container className="mt--5" fluid>
        <Row>
          <Col className="mb-5 mb-xl-0" xl="8">
            <Card className="bg-secondary shadow">
              <CardHeader className="bg-white border-0">
                <Row className="align-items-center">
                  <Col className="text-left" lg="6">
                    <Link
                      href="/superadminplatform/crops"
                      as="/superadminplatform/crops"
                      className="btn btn-light my-3"
                    >
                      Go Back
                    </Link>
                  </Col>
                  <Col className="text-right" lg="6">
                    <h3 className="mb-0">Edit Crop</h3>
                  </Col>
                </Row>
              </CardHeader>
              <Container>
                <Row>
                  <div className="col text-center">
                    {loading && <Spinner color="success" />}
                  </div>
                </Row>
                <Row>
                  <div className="col text-center">
                    {error && <Alert color="danger" />}
                  </div>
                </Row>
              </Container>

              <CardBody>
                <Container>
                  <Row>
                    <div className="col text-center">
                      {loadingEdit && <Spinner color="success" />}
                    </div>
                  </Row>
                  <Row>
                    <div className="col text-center">
                      {errorEdit && <Alert color="danger" />}
                    </div>
                  </Row>
                </Container>
                <Form onSubmit={cropEditHandler}>
                  {/* { crop.length > 0 && ()} */}
                  <h6 className="heading-small text-muted mb-4">
                    Crop Information
                  </h6>
                  <div className="pl-lg-4">
                    <Row>
                      <Col>
                        <FormGroup>
                          <label
                            className="form-control-label"
                            htmlFor="crop-name"
                          >
                            Crop Name
                          </label>
                          <Input
                            className="form-control-alternative"
                            id="crop-name"
                            placeholder="Enter Crop Name"
                            type="text"
                            value={cropName}
                            onChange={(e) => {
                              setCropName(e.target.value);
                            }}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                    <Row>
                      <Col>
                        <FormGroup>
                          <label
                            className="form-control-label"
                            htmlFor="crop-abbreviation"
                          >
                            Crop Abbreviation
                          </label>
                          <Input
                            className="form-control-alternative"
                            id="crop-abbreviation"
                            placeholder="Enter Crop Abbreviation"
                            type="text"
                            value={cropAbbreviation}
                            onChange={(e) => {
                              setCropAbbreviation(e.target.value);
                            }}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </div>
                  <hr className="my-4" />
                  {/* Address */}
                  <h6 className="heading-small text-muted mb-4">
                    Palladium Information
                  </h6>
                  <div className="pl-lg-4">
                    <Row>
                      <Col>
                        <FormGroup>
                          <label
                            className="form-control-label"
                            htmlFor="str-part-number"
                          >
                            strPartNumber(Palladium Reference)
                          </label>
                          <Input
                            className="form-control-alternative"
                            id="str-part-number"
                            placeholder="strPartNumber(Palladium Reference)"
                            type="text"
                            value={strPartNumber}
                            onChange={(e) => {
                              setStrPartNumber(e.target.value);
                            }}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </div>
                  <div className="text-right">
                    <Button type="submit" color="primary">
                      Edit Crop
                    </Button>{' '}
                  </div>
                </Form>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </Container>
    </>
  );

如何将详细信息数据填充到表单字段中？由于收到此错误，因此无法按预期工作：

组件正在将受控输入更改为不受控。这可能是由于值从定义变为未定义引起的，这不应该发生。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

标签： javascriptnode.jsreactjsnext.js