所以我正在用一种我以前从未使用过的语言（Optimizely 和 React）完成一项任务。
正如您在下面看到的，根据返回的值，我有 2 个不同的 if 语句，返回的值很好。我可以在调试时看到这很好，所以优化方面似乎正在工作。似乎正在发生的事情是 main 函数在 .then 完成之前结束，导致错误：
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Home`.
所以我需要尝试让 if 语句在函数完成之前运行。
任何帮助将不胜感激，最终目标是 2 为 2 个不同的用户运行 2 位代码。
(function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(327);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//If original set to 874 if not then set to 884
var _enums = __webpack_require__(623);
var _enums2 = _interopRequireDefault(_enums);
var uuidv4 = __webpack_require__(676);
var user = { key: uuidv4() }
var _optimizely_manager = __webpack_require__(631);
var _optimizely_manager2 = _interopRequireDefault(_optimizely_manager);
_optimizely_manager2.default.getInstance().then(function (optimizelyInstance) {
const variation = optimizelyInstance.activate(_enums2.default.EXPERIMENT_KEYS.CAT_ABOVE_TITLE, user.key)
if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_ORIGINAL){
var _item_list_item = __webpack_require__(874);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
else if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_VARIATION){
var _item_list_item = __webpack_require__(884);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
});
}),
这是我正在使用的演示应用程序。
https://github.com/optimizely/isomorphic-react-demo-app
任务是什么，任务是实际修改视图的顺序。所以一个人会看到视图 A，一个人会看到视图 B，所以 874 的 if 语句是原始代码，而 884 是我将 874 修改为看起来他们想要的代码的代码。我知道外观是正确的，就好像我在 874 中进行了更改一样，它会将视图更改为我想要的方式。我只是有两个选项可能被退回的问题。
我什至可能会在如何做到这一点时发现错误的树，但这是我认为应该做到的。