React TypeError：循環オブジェクト

Question

Reactコンポーネントを生成するためのコードをデバッグするのに苦労しています。私はTypeError：cyclicオブジェクトを取得し続けます。私は解決策オンライン（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

Answer 1

は私の問題への答えを見つけました。ループの中でReactコンポーネントを作成した配列が含まれていた構成（つまり、コンポーネントの小道具）オブジェクトの属性を参照していたことがわかります。ループ中、構成はまだDOM内にあり、その属性のループ内から構成を呼び出すと、DOMへの「後方参照」が作成されます。 2つの回避策：構成から必要な値を一時的な値にコピーするか、反復処理中のオブジェクト内のその値を持つデザインを更新します。今、私のReactコンポーネントをforループまたはmap（）でレンダリングしています。これは、SIMPLICITY TRIUMPHEDの1つのケースです。