reactjs - 从状态或 API 设置 antd 表单值

Question

目前使用 react + redux，我试图将表单的初始值设置为从 API 获取后的状态，但似乎无法弄清楚。它工作正常，我可以在不设置初始值的情况下更新配置文件，但是每当我设置初始值时，我都会收到一个TypeError: Cannot read property 'gender' of null..

我不确定我做错了什么？

const AboutMeForm = ({ profile: { profile }, updateProfile, getProfile }) => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({});

  const initialState = {
    gender: null,
    maritalStatus: null,
    educationLevel: null,
    income: null,
  };
  
  useEffect(() => {
    if (!profile) getProfile();
    if (profile) {
      const profileData = { ...initialState };
      for (const key in profile) {
        if (key in profileData) profileData[key] = profile[key];
      }
      setFormData(profileData);
      form.setFieldsValue({
        gender: formData.gender,
        maritalStatus: formData.maritalStatus,
        educationLevel: formData.educationLevel,
        income: formData.income,
      });
    }
  }, [getProfile, profile]);

  const onSubmit = (values) => {
    updateProfile(values);
  };

  const onSubmitFailed = (errorInfo) => {
    console.log('Failed: ', errorInfo);
  };

  return (
    <>
      <h2 className="mt-5">About Me</h2>

      <Alerts />
      <Form
        form={form}
        name="aboutMe"
        layout="vertical"
        initialValues={{
          gender: formData ? formData.gender : null,
        }}
        onFinish={onSubmit}
        onFinishFailed={onSubmitFailed}
      >
        <Row>
          <Col xs={24} sm={24} md={24} lg={16}>
            <Row gutter={ROW_GUTTER}>
              <Col xs={24} sm={24} md={12}>
                <Form.Item name="gender" label="Gender">
                  <Select placeholder="Select a Gender">
                    <Option value="MALE">Male</Option>
                    <Option value="FEMALE">Female</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12}>
                <Form.Item name="maritalStatus" label="Marital Status">
                  <Select placeholder="Select Marital Status">
                    <Option value="SINGLE">Single</Option>
                    <Option value="MARRIED">Married</Option>
                    <Option value="LIVING_TOGETHER">Living Together</Option>
                    <Option value="DIVORCED">No Longer Married</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12}>
                <Form.Item name="educationLevel" label="Education Level">
                  <Select placeholder="Select Education Level">
                    <Option value="SOME_HIGH_SCHOOL">
                      Some High School or Less
                    </Option>
                    <Option value="HIGH_SCHOOL">
                      High school graduate or equivalent (GED)
                    </Option>
                    <Option value="SOME_COLLEGE">
                      Some college, no degree
                    </Option>
                    <Option value="COLLEGE">College graduate</Option>
                    <Option value="SOME_GRADUATE_SCHOOL">
                      Graduate school, no degree
                    </Option>
                    <Option value="ASSOCIATE_DEGREE">Associate degree</Option>
                    <Option value="GRADUATE_SCHOOL">Masters degree</Option>
                    <Option value="PROFESSIONAL_DEGREE">
                      Professional Degree
                    </Option>
                    <Option value="DOCTORATE">Doctorate</Option>
                    <Option value="COLLEGE_DIPLOMA">College Diploma</Option>
                    <Option value="TRADE_SCHOOL">
                      Some college, no diploma
                    </Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12}>
                <Form.Item name="income" label="Income">
                  <Select placeholder="Select Income">
                    <Option value="LESS_THAN_$25000">Less than $25,000</Option>
                    <Option value="$25000_$49999">$25,000 - $49,999</Option>
                    <Option value="$50000_$74999">$50,000 - $74,999</Option>
                    <Option value="$75000_$99999">$75,000 - $99,999</Option>
                    <Option value="$100000_$149999">$100,000 - $149,999</Option>
                    <Option value="$150000+">$150,000+</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Button type="primary" htmlType="submit">
              Save
            </Button>
          </Col>
        </Row>
      </Form>
    </>
  );
};

AboutMeForm.propTypes = {
  updateProfile: PropTypes.func.isRequired,
  getProfile: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  profile: state.profile,
});

export default connect(mapStateToProps, { updateProfile, getProfile })(
  AboutMeForm
);

我已经用我目前拥有的代码更新了代码，但仍然没有运气预填充字段..

标签： reactjsreact-reduxantd