如何在 React 组件中使用 Meteor.settings

Question

我有一个 React 组件，它在客户端对 init 进行 API 调用。我不想对我的 API 键进行硬编码（上帝禁止在回购中出现），将它放在 Meteor.settings.public 中也好不了多少，因为它只能在控制台中查找。我想将它保留在 Meteor.settings 中，但它对客户端不可见。我试过使用一种方法，但尽管它似乎在服务器上工作，但在客户端未定义方法调用 returns。

在服务器上：

Meteor.methods({ getFileStackAPIKey: function () { if (Meteor.settings.fileStackAPIKey) { console.log(Meteor.settings.fileStackAPIKey) // returns: [fileStackAPIKey] correctly return Meteor.settings.fileStackAPIKey } else { return {message: "Configure Meteor.settings.fileStackAPIKey to connect to FileStack."} } }});

在客户端上：

console.log(Meteor.call('getFileStackAPIKey')); // returns: undefined

我尝试使用 ReactiveVar 并再次将其设置在服务器上，但在客户端上无法访问。我觉得我错过了一些明显的东西。具体来说，我正在努力工作的是 FileStack。他们的示例代码显示了 API 键硬编码内联。与官方 FileStack React 包一样。这似乎不是一个好主意。

Answer 1

它与回调有关。方法结果将在回调中，所以我需要在客户端做的更像是这样：

Meteor.call('getFileStackAPIKey', (err, res) => {
    console.log("FileStack API Key: " + res);
});

但是因为我真正想做的是将它传递给 FileStack init（同样，在客户端），所以我需要将以下内容放入 FileStack 对象的构造函数中：

// "this" is the FileStack object we're constructing
const fileStackObj = this;
Meteor.call('getFileStackAPIKey', (err, apiKey) => {
    // here we're inside the callback, so we have the resulting API key
    const client = filestack.init(apiKey, clientOptions);
    // these are synchronous actions dependent on the existence of "client"
    // that we could not do outside of the callback
    fileStackObj.state = {
        client,
        picker: action === 'pick' ? client.picker({ ...actionOptions, onUploadDone: fileStackObj.onFinished }) : null,
    };
    fileStackObj.onFinished = fileStackObj.onFinished.bind(fileStackObj);
    fileStackObj.onFail = fileStackObj.onFail.bind(fileStackObj);
});

如何在 React 组件中使用 Meteor.settings

How to use Meteor.settings in a React Component

reactjs

meteor

filestack