反應類型錯誤：循環對象

我一直在艱難的時間調試代碼來生成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

反應類型錯誤：循環對象

回答

相關問題