状态更改后 Antd 表单初始值不更新

Question

我有一张表格，显示学校名称及其费用或费率。表中有一个按钮可以打开包含此组件或表单的抽屉。表中有一个按钮可以切换抽屉的状态。只要我仅通过单击按钮读取表单中的值，我的 initalValue 就会更新。但是，如果我更新价格并提交任何 1 个条目的表格，那么我的价格或学校的初始值不会因其他条目或学校而改变。虽然我的状态正在相应地发生变化，但我确实通过渲染状态进行了检查。但我的表单的初始值没有相应更新

import React, { useState, useEffect } from 'react'
import { Table, Button, Popconfirm, Drawer, Form, Input, Select, notification } from 'antd'

const { Option } = Select

const layout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 10,
  },
}
const tailLayout = {
  wrapperCol: {
    offset: 7,
    span: 14,
  },
}


function SchoolRates({ form, relevantData }) {
  const [rates, setRates] = useState(null)

  useEffect(() => {
   setRates(relevantData)
}, [someCondition])

  const updateRates = e => {
    e.preventDefault()
    form.validateFields((error, values) => {
      console.log(error, values, 'forms')
    })
    return 'Data Updated'
  }

  return (
    <>
      <div>
        {`${rates?.schoolName}, ${rates?.Price}`}
      </div>
      <Form {...layout} initialValue={rates} onSubmit={e => updateRates(e)}>
        <Form.Item label="Country" style={{ marginBottom: '5px' }} size="small">
          {form.getFieldDecorator('schoolName', {
            initialValue: rates?.schoolname,
            rules: [{ required: true, message: 'Please select a school!' }],
          })(
            <Select
              placeholder="School"
              allowClear
              size="small"
              style={{ borderRadius: 0 }}
            >
              {schoolList.map(item => (
                <Option value={item}>{item}</Option>
              ))}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="Price / Learner" style={{ marginBottom: '5px' }} size="small">
          {form.getFieldDecorator('price', {
            initialValue: rates?.price,
            rules: [{ required: true, message: 'Please enter price/learner' }],
          })(
            <Input
              size="small"
              type="number"
              style={{ borderRadius: 0 }}
            />,
          )}
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" size="small">
            Save
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default Form.create()(UpdateRates)

我只想在我从表格中单击其他学校后立即重新渲染完整的表单以更新数据

Answer 1

要更新初始值，需要清理或重置表单输入字段。因此，在成功提交表单后添加 form.resetFields()（以重置输入字段中的数据）。