反应类型错误：循环对象

我一直在艰难的时间调试代码来生成React组件。我一直得到一个TypeError：循环对象。我已经在线阅读了解决方案（https://facebook.github.io/react/docs/lists-and-keys.html,Rendering React Components from Array of Objects），但仍然没有显示在我的代码中。反应类型错误：循环对象

请参阅以下内容：

'use strict' 
/** 
* The form input radio button for generating HTML Radio button and Radio  button groups 
*/ 

import React from 'react' 
import AbstractFormField from './AbstractFormField.jsx' 

const fieldProps = {} 
const propsKey = Symbol.for('factorySymbol') 

class RadioFactory extends AbstractFormField { 
constructor(props) { 
    console.log("RadioFactory props: " + JSON.stringify(props)) 
    super(props) 
    this[propsKey] = Object.assign(fieldProps, props) 
    console.log("RadioFactory fieldProps: " + JSON.stringify(this.fieldProps)) 
    this.validateProps = this.validateProps.bind(this)    
} 

get fieldProps() { 
    return this[propsKey] 
} 

get fieldComponent() { 
    let validateProps = this.validateProps 
    let config = this.fieldProps   
    console.log("getFieldComponent radios: " + JSON.stringify(config.radios)) 

    let Field = React.createClass({ 

     render: function() { 

      if (!validateProps()) {      
       return null        
      } 

      return (
       <div className="radio">{ 
        config.radios.map(function(radio, index) { 
           return <label> 
           <input type="radio" value={index} key={"radio_" + index} />{radio}</label>          
          })  
       }<input type="radio" /></div> 
      ) 
     } 
    }) 

    return <Field {...this.fieldProps} /> 
} 

validateProps() { 
    // ensure the propsKey returns a valid config for creating selected form input (radio buttons) 
    let config = this.fieldProps 
    console.log("config: " + JSON.stringify(config)) 
    let hasPreField = config.hasOwnProperty("preField") ? true : false 
    let hasPostField = config.hasOwnProperty("postField") ? true : false 
    let hasAccessory = (config.hasOwnProperty("accessory.pre") ? true : false) || (config.hasOwnProperty("accessory.post") ? true : false) 
    let hasRadios = false   
    let validProps = false 

    if(config.hasOwnProperty("type")) { 
     validProps = (config.type.code > 0) &&    
     ((config.name !== '') || (config.name !== undefined)) 
     console.log("validProps: " + validProps) 
    } 

    if(config.hasOwnProperty("radios")) { 
     hasRadios = config.radios instanceof Array 
     console.log("hasRadios: " + hasRadios) 
    } 

    return (hasPreField || hasPostField || hasAccessory) || (validProps && hasRadios) 
} 
} 

class RadioComponent extends React.Component { 
constructor(props) { 
    super(props) 
} 

render(){ 
    console.log("RadioComponent props: " + JSON.stringify(this.props)) 
    let factory = new RadioFactory(this.props) 
    if(factory.validateProps()) { 
     return factory.fieldComponent 
    } else { 
     return null 
    }  
}

}

出口默认RadioComponent

来源

2016-12-23 anie codeskol

我不确定React如何在循环中管理组件，但如果我要将我的无线电的值作为字符串返回而不反应组件，则一切正常。看来问题在于生成组件 - 导致对DOM或无线电组件的循环引用，我只是不明白为什么 –

好吧，很奇怪。我有在Chrome中呈现的单选按钮，但不是在Firefox中？有任何想法吗？思考我的缓存或内存泄漏在Firefox导致这一点 –

找到一个答案，我的问题。原来我引用了一个配置属性（即组件的道具）对象，该对象包含了我在其中创建了React组件的数组。在循环中，配置仍然在DOM中，并且从其属性的循环内调用它，从而为DOM创建了“反向引用”。两种解决方法：将我需要的配置值复制到一个时间值中，或者在我正在迭代的对象内更新具有该值的设计。现在，让我的React组件在for循环或map（）中呈现。这是SIMPLICITY TRIUMPHED的一种情况。

来源

2016-12-24 09:08:54

反应类型错误：循环对象

回答

相关问题