Question

我将以下散列哈希作为属性传递给React组件：

 {"DOM": {"currency": [35], "environment": 3.225740332, "travel": 5.794715917, "nature": 2.585732079, "tourist": 4.626050961, "air": 2.824149021, "price": 4.023059134, "culture": 1.507300344, "safety": 4.301005957, "internet": 3.464069438, "region": 3, "health": 4.894419866, "ground": 3.577075619, "openness": 3.23704767, "id": 175, "name": "Dominican Republic"}, "LUX": {"currency": [3], "environment": 5.230881286, "travel": 4.639198753, "nature": 3.087291467, "tourist": 4.66924015, "air": 3.588001597, "price": 4.09672854, "culture": 1.618723035, "safety": 6.459053841, "internet": 6.089713858, "region": 4, "health": 6.261927417, "ground": 5.734901934, "openness": 4.251884442, "id": 215, "name": "Luxembourg"}}

因此，我遇到了这个问题：

invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {currency, rainfall, code, rainy_dry, temperature, environment, travel, nature, tourist, air, price, culture, safety, internet, region, health, ground, openness, id, name}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `SampleDisplay`.invariant @ invariant.js:39traverseAllChildrenImpl @ traverseAllChildren.js:158traverseAllChildrenImpl @ traverseAllChildren.js:114traverseAllChildren @ traverseAllChildren.js:186ReactChildReconciler.instantiateChildren @ ReactChildReconciler.js:52ReactMultiChild.Mixin._reconcilerInstantiateChildren @ ReactMultiChild.js:197ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:232ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37obj.(anonymous function) @ backend.js:8370ReactMultiChild.Mixin._mountChildByNameAtIndex @ ReactMultiChild.js:474ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87obj.(anonymous function) @ backend.js:8370ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102obj.(anonymous function) @ backend.js:8370runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147ReactUpdates_flushBatchedUpdates @ ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62enqueueUpdate @ ReactUpdates.js:176enqueueUpdate @ ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:190ReactComponent.setState @ ReactComponent.js:65getDOMWidth @ index.js:1

不幸的是它出现在index.js:1中，所以在自动生成的文件中是不可读的。

因此，我将哈希的散列转换为如下数组的数组：

var countries = Object.keys(data).map(function(key) {
            var countryDesc = data[key];
            var attributes = Object.keys(countryDesc).map(function(key) {
              return [{type: key, name: data[key]}];
            };
            return [{type: key, name: attributes}];
          });

但是，错误仍然存在。

这是什么原因？

未捕获的不变违规：对象无效

0 个答案: