Javascript 反应渲染选择字段多次

我有5个需要呈现的标签，每个标签都应该有一个带有以下选项的选择字段：

string

，

fixed

，

guid

，

disabled

我实现了以下代码

class renderCampaignCodes extends Component {
    state = {
        defaultCampaigns: [
            { name: 'Campaign Source: utm_source' },
            { name: 'Campaign Medium: utm_medium' },
            { name: 'Campaign Name: utm_campaign' },
            { name: 'Campaign Term: utm_term' },
            { name: 'Campaign Content: utm_content' }
        ],
        defaultTypes: ['string', 'fixed', 'guid', 'disabled']
    }

    render() {
        const { defaultCampaigns } = this.state
        return (
            <Flexbox flexDirection='column' marginTop='20px' width='600px'>
                {
                    defaultCampaigns.map((campaign, idx) => {
                        return (
                            <div key={idx}>
                                <Flexbox justifyContent='space-between'>
                                    <Flexbox marginTop='40px'>
                                        <label>{campaign.name}</label>
                                    </Flexbox>
                                    <Flexbox>
                                        <Field
                                            name='type'
                                            component={renderSelectField}
                                            label='Type'
                                            children={this.state.defaultTypes.map((item, i) => <MenuItem 
                                                key={i}
                                                value={item}
                                                label={item.replace(/^\w/, l => l.toUpperCase())}
                                                primaryText={item.replace(/^\w/, l => l.toUpperCase())}/>)
                                            }
                                        />
                                    </Flexbox>
                                </Flexbox>
                            </div>
                        )
                    })
                }
            </Flexbox>
        )
    }
}

class renderCompaignCodes扩展组件{
状态={
默认活动：[
{name:'活动源：utm_源'}，
{name:'活动媒体：utm_媒体'}，
{name:'活动名称：utm_活动'}，
{name:'Campaign Term:utm_Term'}，
{name:'活动内容：utm_内容'}
],
默认类型：['string'，'fixed'，'guid'，'disabled']
}
render（）{
const{defaultCampaigns}=this.state
返回(
{
defaultCampaigns.map（（活动，idx）=>{
返回(
{campaign.name}
l、 toUpperCase（））}
primaryText={item.replace（/^\w/，l=>l.toUpperCase（））}/>）
}
/>
)
})
}
)
}
}

但从任何选择字段中选择的值将显示在所有位置：

---

如何防止这种情况发生？

看起来您的每个选择的

名称

属性都设置为相同，导致它们从存储/状态中获取相同的值（取决于您的实现）

您将需要使用某些名称空间来命名该类型。例如：

<Field
    name={`${idx}.type`}
    component={renderSelectField}
    label='Type'
    children={this.state.defaultTypes.map((item, i) => (
        <MenuItem 
            key={i}
            value={item}
            label={item.replace(/^\w/, l => l.toUpperCase())}
            primaryText={item.replace(/^\w/, l => l.toUpperCase())}
        />
    ))}
/>

(
l、 toUpperCase（））}
primaryText={item.replace（/^\w/，l=>l.toUpperCase（））}
/>
))}
/>