更新 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);
  }
}