react中，antd编辑弹窗没有正确显示？

• 描述：只有选择了账目后，才会弹出计量输入框，且下面的金额由账目中的金额转换比例和计量自动算出结果。没有选择账目，则需要手动输入金额。

• 正常情况，如图：
  

  

• 问题：点击编辑后，原本数据中有选择账目，但是在弹窗中，没有显示计量。在编辑数据成功后，点击新增按钮，弹窗中计量会直接显示。

• 编辑问题：

• 新增问题：

代码如下：

• 获取账目列表

const [account, setAccount] = useState(null);
  const state = useStore().getState();
  const accountList = state.financial.accountList;

• 计量金额处理

 const handleValueChange = (e) => {
    //e.value;
    //事件委托 event.target=>获取到输入框input,.value获取到输入框的值
    if (account) {
      form.setFieldValue('amount', e.target.value * account.ratio);
      console.log(e.value);
    }
  };
  //===账目列表遍历
  const financingCategorysMap = {};
  accountList?.forEach((a) => {
    financingCategorysMap[a.sid] = { text: a.name, ratio: a.ratio };
    console.log('账目a==>', a);
  });
  const ops: any = {};
  if (account) {
    if (account.suffix) {
      ops.suffix = account.unit;
    } else {
      ops.prefix = account.unit;
    }
  }

• 账目表格

 {
      title: '账目',
      search: false,
      dataIndex: 'accountId',
      render: (text) => {
        const account = accountList.find((a) => a.sid === text);
        return account ? account.name : '无';
      },
    },
    {
      title: '计量',
      search: false,
      dataIndex: 'value',
    },
    {
      title: '金额',
      search: false,
      dataIndex: 'amount',
    },

• 弹窗代码

<>
              <Form.Item
                label={
                  <span>
                    账目
                    <Tooltip title="若没有账目可以选择，请先在账目页面进行添加">
                      <QuestionCircleOutlined style={{ marginLeft: 8 }} />
                    </Tooltip>
                  </span>
                }
                name="accountId"
              >
                <Select
                  style={{ width: 120 }}
                  allowClear
                  onChange={handleCategoryChange}
                  options={accountList?.map((a) => ({
                    value: a.sid,
                    label: a.name,
                  }))}
                />
              </Form.Item>

              {account && (
                <Form.Item
                  label="计量"
                  name="value"
                  rules={[{ required: true }]}
                >
                  <Input
                    onChange={(e) => handleValueChange(e)}
                    style={{ width: '100%' }}
                    min={1}
                    {...ops}
                  />
                </Form.Item>
              )}
            </>
                  <Form.Item
                        label="金额"
                        name="amount"
                        rules={[{ required: true }]}
                      >
                        <InputNumber
                          style={{ width: '100%' }}
                          min={1}
                          prefix="￥"
                        />
                      </Form.Item>

新增，编辑按钮的处理事件，弹出窗口的保存代码发出来看下。

看描述编辑完后再新增没有清空account变量导致计量直接显示了。

新增时调用setAccount(null)清空下account的值

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632