如何基于第二数据库查询更改动态构建的下拉列表默认选定值？

Question

我正在基于Axios API调用创建一个列表，以获取确实挂载的组件中的值。这样就可以了。

<React.Fragment>
  <tr>
      <td>{filename}</td>
      <td>
         ** <select id={key} value="">
              <option value="Select Product">Select Product</option>)
              {this.state.products.map(productName =>
              <option value={productName.product_name}> 
                      productName.product_name}</option>)}
           </select>
       </td>
    </tr>
</React.Fragment>

哪个会产生以下内容？

<helo>
<tpc>
<mdg>
<tlm>

*问题的实质... 现在，我想根据第一列中的文件名，基于第二次Axios API调用，自动调整下拉列表的选定值。 即我的API使用{filename}查询数据库，以获取正确的产品“ mdg”，现在我需要将下拉默认值设置为“ mdg”。上面的片段将产生一个包含多行的表，因此我需要遍历每行并重复API调用以设置默认的选定值。我不确定如何动态执行此操作。
我尝试将我的API调用添加到**位置，但这没有用。预先感谢。

<select id={key} value={this.queryDatabase({ filename })}>