Question

我一直很难调试用于生成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

Answer 1

找到我的问题的答案。事实证明我正在引用配置的属性（即组件的道具）对象，该对象包含我在循环中创建React组件的数组。在循环中，配置仍然在DOM内，并在它的循环内调用它创建了一个＆＃34;后引用＆＃34;到DOM。两种解决方法：将我需要的值从配置复制到时间值，或者在我迭代的对象中更新具有该值的设计。现在，让我的React组件在for循环或map（）中呈现。这是SIMPLICITY TRIUMPHED的一个案例。

React TypeError：循环对象

1 个答案: