更新 antd 表单组件的 select 值

Question

我目前正在从 API 端点获取信息并更新antd Form 组件的值。 我可以使用setFieldsValue()更新数字和文本输入的值，但对于选择来说，事情有点复杂。 我的代码目前如下所示：

<Form
  {...layout}
  name="basic"
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  form={form}
>
  [... Other form items removed for simplicity]
  <Form.Item
    label="NFT Status"
    name="nftStatus"
  >
    <Select defaultValue="not-minted" style={{ width: 120 }} onChange={handleNftStatusChange}>
      <Option value="minted">Minted</Option>
      <Option value="not-minted">Not minted</Option>
      <Option value="sold">Sold</Option>
    </Select>
  </Form.Item>

  <Form.Item
    label="Controls"
  >
    <Button style={{ marginRight: 15 }}>Cancel</Button>
    <Button type="primary" htmlType="submit">Save</Button>
  </Form.Item>
</Form>

这是用于更新表单值的代码：

async function getCollectible(tokenId, contractAddress) {
  try {
    const asset = await seaport.api.getAsset({
      tokenAddress: contractAddress,
      tokenId: tokenId,
    });

    const getNftStatus = () => {
      if (asset.numSales !== 0) {
        return 'sold';
      } else if (asset.numSales === 0 && asset.orders.length === 0) {
        return 'not-minted';
      } else {
        return 'minted';
      }
    };

    // Write information from response into form inputs
    form.setFieldsValue({
      artworkName: asset.name,
      description: asset.description,
      externalLink: asset.externalLink,
      artist: asset.owner.address,
      nftStatus: getNftStatus(),
      price: asset.lastSale ? (asset.lastSale.totalPrice / 1000000000000000000) : ''
    });
  } catch(e) {
    console.log(e);
  }
}

运行使用form.setFieldsValue()的getCollectible() function 时，所有输入值均已正确设置，select 除外。 我不确定如何以编程方式更新其值。 有任何想法吗？

Answer 1

到 select 一个选项，术语“选择”需要添加到 HTML 标签

<option value="value" selected >Option Name</option>

这可以通过将表单数据存储到 state（例如：foo）在 React 中动态处理，然后是以下代码

 <Select defaultValue="not-minted" style={{ width: 120 }} onChange={handleNftStatusChange}>
  <Option value="minted" {foo.nftStatus === "minted"?"selected":""} >Minted</Option>
  <Option value="not-minted" {foo.nftStatus === "not-minted"?"selected":""} >Not minted</Option>
  <Option value="sold"  {foo.nftStatus === "sold"?"selected":""}>Sold</Option>
</Select>

Answer 2

我认为这是一些异步问题。 尝试提取getNftStatus并将asset添加为参数。

const getNftStatus = (asset) => {
  if (asset.numSales !== 0) {
    return 'sold';
  } else if (asset.numSales === 0 && asset.orders.length === 0) {
    return 'not-minted';
  } else {
    return 'minted';
  }
}

async function getCollectible(tokenId, contractAddress) {
  try {
    const asset = await seaport.api.getAsset({
      tokenAddress: contractAddress,
      tokenId: tokenId,
    });

    // Write information from response into form inputs
    form.setFieldsValue({
      artworkName: asset.name,
      description: asset.description,
      externalLink: asset.externalLink,
      artist: asset.owner.address,
      nftStatus: getNftStatus(asset),
      price: asset.lastSale ? (asset.lastSale.totalPrice / 1000000000000000000) : ''
    });
  } catch(e) {
    console.log(e);
  }
}