reactjs - 如何从 Sharepoint 在线 SPFx Web 部件使用 Azure 认知搜索

Question

我最近接触SPFx的不多，所以我想我需要学习一下，:)

我想在这里使用这个 NPM 包:
https://www.npmjs.com/package/azure-search

进入一个基本的新 SPFx web 部件:

代码是这样的:

export default class Azurecognitivesearchwebpart extends React.Component<IAzurecognitivesearchwebpartProps, {}> {

  public render(): React.ReactElement<IAzurecognitivesearchwebpartProps> {    
  //var AzureSearch = require('azure-search');
  var client = AzureSearch({
    url: "https://x.search.windows.net",
    key: "xx",
    version: "2016-09-01", // optional, can be used to enable preview apis
    headers: { // optional, for example to enable searchId in telemetry in logs
      "x-ms-azs-return-searchid": "true",
      "Access-Control-Expose-Headers": "x-ms-azs-searchid"        
    }
  });

  // search the index
  client.search('azureblob-index-aihw', {search: "scott", top: 10}, function(err, results, raw){
    // raw argument contains response body as described here:
    // https://msdn.microsoft.com/en-gb/library/azure/dn798927.aspx
  });


    return (
      <div className={ styles.azurecognitivesearchwebpart }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

但是我得到这个错误:

sp-webpart-workbench-assembly_default.js:26411 [1585151245901][OtherGlobalError.window.onerro] TypeError: Object(...) is not a function

我在这里错过了什么？

还有一些

Answer 1

从错误中，您无法判断是哪一行触发了错误……但话虽这么说……

您注释掉了您正在使用的 NPM 包的导入……这意味着您在创建 AzureSearch() 实例的地方它根本没有定义。

FWIW，那个 NPM 包看起来并没有提供太多值(value)……为什么不直接调用直接端点呢？看起来该包所做的只是为您构建端点。我只是直接调用端点。

我在 GitHub 操作中执行此操作: https://github.com/andrewconnell/azure-search-index/blob/master/src/index.ts

将其用作指南……请注意，这是从 Node 环境运行的，但从 SPFx 运行会更容易，因为您的 SPFx 组件中不需要 Axios。相反，只需使用 HttpClient API 来提交 HTTP 请求。